3. 3
Що таке Web-сторінки?
Гіперпосилання - «активна» посилання на інший
документ.
Гіпертекст - текст, що містить гіперпосилання.
Гіпермедіа-документ - документ, що включає текст,
малюнки, звуки, відео, в якому будь-який елемент може
бути гіперпосиланням.
WWW (World Wide Web) - «Всесвітня павутина», служба
Інтернет для обміну інформацією у вигляді гіпертексту
(і гіпермедіа).
Web-сторінка - Текстовий файл, в якому описано
розміщення матеріалу на екрані.
Браузер - програма для перегляду Web-сторінок на
екрані (Internet Explorer, Mozilla Firefox, Opera).
4. 4
Які бувають Web-сторінки?
• статичні - існують на сервері у вигляді
готових файлів:
*. Htm, *. html
• динамічні - повністю або частково
створюються на сервері в момент запиту (вибір
інформації з бази даних)
*. Shtml, *. asp, *. pl, *. php
• дозволяють вибирати інформацію з бази даних
за заздалегідь невідомим запитам
• додаткове навантаження на сервер
• завантажуються повільніше
5. 5
Мова HTML
HTML = Hypertext Markup Language
(Мова розмітки гіпертексту )
HTML – це не мова програмування !
!
HTML-сторінка - це текстовий файл (Блокнот):
<HTML>
<HEAD>
<TITLE>Моя сторінка</TITLE>
</HEAD>
<BODY>
Привіт!
…
</BODY>
</HTML>
index.html
sail.jpg man.jpg sunset.jpg
clock.avi
ball.swf
bee.wav
images
6. 6
Теги
Тег – це команда мови HTML, яку виконує браузер:
• непарні теги
• парні теги (контейнери)
<IMG SRC = "vasya.jpg">
вставить
рисунок
<TABLE>
...
</TABLE>
відкриваючий
закриваючий
область дії тега:
опис таблиці
8. 8
Кодування кольору
• имена
red, green, blue, magenta, black,
• шістнадцяткові коди
white
# F A 8 0 7 2
R G B
# F F 0 0 0 0
# F F F F F F
# 0 0 F F F F
# 0 0 0 0 0 0
# A A A A A A
10. 10
Тег BODY – загальні властивості сторінки
• колір фону і тексту
•
• колір гіперпосилань
<BODY TEXT="white"
BGCOLOR=#00FF00>
Привіт!
</BODY>
<BODY LINK="#FF8C00"
VLINK=green>
...
</BODY>
колір тексту
колір фону
відвідані посилання
(visited link)
Колір
посилань
атрибути тега
11. 11
колір тексту
розмір шрифту
Тег FONT – властивості блоку тексту
Привіт!
<FONT COLOR=red>
Як справи?
</FONT>
Привіт!
<FONT COLOR=red
SIZE=6>
Як справи?
</FONT> від 1 до 7
(3 – нормальний)
12. 12
Стилі оформлення
жирний (bold) <B>Вася</B> Вася
курсив (italic) <I>Вася</I> Вася
підкреслення
(underline) <U>Вася</U> Вася
закреслення
(strike out) <S>Вася</S> Вася
верхній індекс
(superscript) Вася<SUP>2</SUP> Вася2
нижній індекс
(subscript) Вася<SUB>2</SUB> Вася2
13. 13
Форматований текст (листинги програм)
program qq;
var a, b: integer;
begin
writeln("Введите два числа");
read(a,b);
writeln(a,'+',b,'=',a+b);
end.
<PRE>
program qq;
var a, b: integer;
begin
writeln("Введите два числа");
read(a,b);
writeln(a,'+',b,'=',a+b);
end.
</PRE>
Відформатований текст
(preformatted)
16. 16
Абзаци
перехід на новий рядок
абзац (з відступами)
Одно физическое тело захотело
поменять три своих
старых варежки на что-нибудь
хорошее.
<BR>
До самого вечера тело с
варежками ...
<P>
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>
17. 17
Вирівнювання
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
</P>
left по лівій межі
right по правій межі
center по центру
justify по ширині
Не
використовуйте
вирівнювання по
ширині для вузьких
стовпців!
!
атрибут тега <P>
21. 21
Посилання на інші сторінки сайту
<A HREF="table.htm">Таблицы</A>
• сторінка в тій же папці
anchor (якір)
hyper reference
(гіпепосилання)
• сторінка у вкладеній папці
<A HREF="example/ex1.htm">Пример</A>
• сторінка в сусідній папці
<A HREF="../texts/text1.htm">Текст</A>
вийти з поточної папки
22. 22
Посилання на інші сайти
<A HREF="http://www.mail.ru">Пошта</A>
• на головну сторінку сайту
index.htm, index.html, default.asp, …
• на конкретну сторінку сайту (URL)
<A HREF="http://www.vasya.ru/text/a.htm">
Васін текст</A>
• на файл для скачування
<A HREF="http://www.vasya.ru/prog.zip">
Скачати</A>
23. 23
Посилання усередині сторінки
<A NAME="up"></A>
<A HREF="#chap1">Глава 1</A><br>
<A HREF="#chap2">Глава 2</A><br>
<A NAME="chap1"></A>
<H1>Глава 1</H1>
Это текст главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.<BR>
<A HREF="#up">Наверх</A>
<A NAME="chap2"></A>
<H1>Глава 2</H1>
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.<BR>
<A HREF="#up">Наверх</A>
• в іншому файлі
<A HREF="texts.html#color">Цвет текста</A>
мітка (якір)
перехід на мітку
31. 31
Формати малюнків
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)
• прозорість і напівпрозорість (альфа-канал)
• немає анімації
• погано стискає дрібні малюнки
33. 33
Малюнки в документі
<IMG SRC="flag.jpg">
<IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg">
<IMG SRC="http://www.vasya.ru/img/flag.jpg">
з тієї ж папки:
з іншої папки:
з іншого сервера:
image
(Зображення)
source
(Джерело)
36. 36
Інші атрибути
<IMG SRC="myphoto.jpg"
ALT="Моя фотографія"
WIDTH=100 HEIGHT=150
BORDER=0>
• спливаюча підказка
• напис на місці
малюнка, якщо його
немає
розміри дозволяють:
• розтягнути - стиснути
• не псувати дизайн,
якщо малюнка немає
товщина рамки
навколо малюнка
39. 39
Найпростіша таблиця
<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
товщина рамки
TABLE таблиця
TR = table row рядок таблиці
TD = table data дані таблиці
TH = table header заголовок (жирний, по центру)
40. 40
Розміри
<TABLE WIDTH="60%" HEIGHT="300">
...
</TABLE>
ширина в пікселях або
у % від ширини вікна
браузера
висота в пікселях
<TR HEIGHT="50">
...
</TR>
всієї таблиці:
рядки:
комірки:
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
ширина в пікселях
або у % від
ширини таблиці
41. 41
Вирівнювання
<TABLE BORDER="1">
<TR ALIGN="center"
VALIGN="top">
<TD WIDTH=120 HEIGHT=100>По
центру, по верхней границе</TD>
<TD ALIGN="right" VALIGN="middle"
WIDTH=200>По правой границе,
по середине</TD>
</TR>
</TABLE>
<TABLE ALIGN="center">
...
</TABLE>
всієї таблиці:
інформації в комірках:
left,
center,
right
left,
center,
right
top,
middle,
bottom
42. 42
Фон і колір тексту
<TABLE BORDER="1" BGCOLOR="green">
<TR HEIGHT=30 BGCOLOR="blue">
<TD><FONT COLOR="white">Привет!</FONT></TD>
<TD BGCOLOR="red"></TD>
</TR>
<TR>
<TD BACKGROUND="web.jpg">Таблица из двух
строк</TD>
<TD>и двух столбцов</TD>
</TR>
</TABLE>
колір фону
фоновий малюнок
47. 47
Фрейми
Фрейм (frame) – Це частина складної Web-сторінки,
в яку може бути завантажена інша Web-сторінка.
3 файли:
left.html – сторінка в лівій частині
right.html – сторінка в правій частині
index.html – опис структури
49. 49
Кордон між фреймами
<FRAMESET COLS="30%,*" FRAMESPACING="10">
...
</FRAMESET>
<FRAMESET COLS="30%,*" FRAMEBORDER="0">
...
</FRAMESET>
межа між фреймами:
0 - невидима, 1 - видима
ширина смуги між фреймами,
за яку можна перетягнути
кордон
50. 50
Налаштування фрейма (FRAME)
<FRAME SRC="a.htm"
MARGINWIDTH="0"
MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
прибрати відступи
від краю кадру до
вмісту
смуга прокручування:
auto - з'являється, коли треба
yes - є завжди
no - немає ніколи
заборонити
зміну
розмірів
52. 52
Складні структури (3 фрейма)
index.html
<FRAMESET COLS="30%,*">
<FRAME SRC="left.html">
</FRAMESET>
<FRAMESET ROWS="40,*">
<FRAME SRC="up.html">
<FRAME SRC="down.html">
</FRAMESET>
53. 53
Як відкрити посилання в іншому фреймі
<FRAME ... NAME="qq">
<A HREF="chapter2.htm"
TARGET="qq">Глава 2</A>
TARGET
_blank - у новому вікні
_parent - у батьківському вікні
_top - в головному вікні
55. 55
Що може Javascript?
• інформація статична
• немає інтерактивності (тільки перехід на
іншу сторінку)
Чим погана HTML-сторінка?
Що можна зробити за допомогою Javascript?
• зміна малюнка при наведенні миші
• випадають меню
• спливаючі підказки
• фотогалерея без перевантаження сторінки
• рух об'єкта по екрану
• Javascript може бути відключений в браузері
56. 56
Основні принципи
• кожен елемент на сторінці (текст, малюнок,
таблиця) - це об'єкт, що має свої властивості
• властивості об'єкта можна міняти з програми
на Javascript (скрипта)
• все, що відбувається - це події
• усі події можна «обробляти», тобто якось
реагувати на них
Javascript – це мова програмування!
!
HTML + Javascript = DHTML (Dynamic HTML)
57. 57
Заміна малюнка при русі миші
<IMG SRC="image1.gif"
onMouseOver="this.src='image2.gif'"
onMouseOut="this.src='image1.gif'">
коли курсор миші
над малюнком
після відходу
миші
Події:
onMouseOver – Курсор миші над об'єктом
onMouseOut – Курсор миші пішов з об'єкту
початковий
малюнок
this – Цей об'єкт
this.src – властивість SRC цього об'єкта
