Web-сторінки. Мова HTML · •анімація •тільки з палітрою(2...
57
Web-сторінки. Мова HTML 1. Введення 2. Оформлення тексту 3. Гіперпосилання 4. Списки 5. Малюнки 6. Таблиці 7. Фрейми 8. Поняття про JavaScript
Transcript of Web-сторінки. Мова HTML · •анімація •тільки з палітрою(2...
Web-сторінки.
Мова HTML
1. Введення
2. Оформлення тексту
3. Гіперпосилання
4. Списки
5. Малюнки
6. Таблиці
7. Фрейми
8. Поняття про JavaScript
Web-сторінки.
Мова HTML
Тема 1. Введення
3
Що таке Web-сторінки?
Гіперпосилання - «активна» посилання на інший
документ.
Гіпертекст - текст, що містить гіперпосилання.
Гіпермедіа-документ - документ, що включає текст,
малюнки, звуки, відео, в якому будь-який елемент може
бути гіперпосиланням.
WWW (World Wide Web) - «Всесвітня павутина», служба
Інтернет для обміну інформацією у вигляді гіпертексту
(і гіпермедіа).
Web-сторінка - Текстовий файл, в якому описано
розміщення матеріалу на екрані.
Браузер - програма для перегляду Web-сторінок на
екрані (Internet Explorer, Mozilla Firefox, Opera).
4
Які бувають Web-сторінки?
• статичні - існують на сервері у вигляді
готових файлів:
*. Htm, *. html
• динамічні - повністю або частково
створюються на сервері в момент запиту (вибір
інформації з бази даних)
*. Shtml, *. asp, *. pl, *. php
• дозволяють вибирати інформацію з бази даних
за заздалегідь невідомим запитам
• додаткове навантаження на сервер
• завантажуються повільніше
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.aviball.swfbee.wav
images
6
Теги
Тег – це команда мови HTML, яку виконує браузер:
• непарні теги
• парні теги (контейнери)
<IMG SRC = "vasya.jpg">
вставить
рисунок
<TABLE>
...
</TABLE>
відкриваючий
закриваючий
область дії тега:
опис таблиці
7
Найпростіша Web-сторінка
<HTML>
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
first.html
<HEAD>
<TITLE>Моя перша
Web-сторіка</TITLE>
</HEAD>
шапка («голова»)
<BODY>
Привіт!
</BODY>
основна частина
(«тіло»)
8
Кодування кольору
• имена
red, green, blue, magenta, black,
• шістнадцяткові коди
white
# FA8072
R G B
# FF0000
# FFFFFF
# 00FFFF
# 000000
# AAAAAA
2. Оформлення тексту
10
Тег BODY – загальні властивості сторінки
• колір фону і тексту
•
• колір гіперпосилань
<BODY TEXT="white"
BGCOLOR=#00FF00>
Привіт!
</BODY>
<BODY LINK="#FF8C00"
VLINK=green>
...
</BODY>
колір тексту
колір фону
відвідані посилання
(visited link)
Колір
посилань
атрибути тега
11
колір тексту
розмір шрифту
Тег FONT – властивості блоку тексту
Привіт!
<FONT COLOR=red>
Як справи?
</FONT>
Привіт!
<FONT COLOR=red
SIZE=6>
Як справи?
</FONT> від 1 до 7
(3 – нормальний)
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
Форматований текст (листинги програм)
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)
14
Заголовки: H1 … H6
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок розділу</H2>
<H3>Заголовок підрозділу</H3>
<H4>Заголовок параграфа</H4>
<H5>Коментар</H5>
<H6>Авторські позначки</H6>
</BODY>
вирівнювання:
<H1 ALIGN=center>Історія</H1>
left,
center,
right
15
Спеціальні символи
Символ HTML-код Назва
¡ або Нерозривний пробіл
§ § Параграф
© © або © Символ авторського права
« « або « Ліві російські лапки
® ® або ® Зареєстрована торгова марка
° ° Градус
± ± Плюс-мінус
² ² Квадрат
³ ³ Куб
» » або » Праві російські лапки
¼ ¼ Чверть
½ ½ Половина
¾ ¾ Три чверті
× × Знак множення
÷ ÷ Знак ділення
16
Абзаци
перехід на новий рядок
абзац (з відступами)
Одно физическое тело захотело
поменять три своих
старых варежки на что-нибудь
хорошее.
<BR>
До самого вечера тело с
варежками ...
<P>
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>
17
Вирівнювання
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
</P>
left по лівій межі
right по правій межі
center по центру
justify по ширині
Не
використовуйте
вирівнювання по
ширині для вузьких
стовпців!
!
атрибут тега <P>
18
Лінія-роздільник
<HR>
<HR WIDTH="60%" SIZE="3" ALIGN="right">
horizontal rule
ширина в
пікселях або
відсотках товщина вирівнювання
3. Гіперпосилання
20
Колір гіперпосилань
<BODY LINK="#FF8C00"
VLINK=green
...
</BODY>
LINK посилання, на яких не були
VLINK відвідані посилання
21
Посилання на інші сторінки сайту
<A HREF="table.htm">Таблицы</A>
• сторінка в тій же папці
anchor (якір)
hyper reference
(гіпепосилання)
• сторінка у вкладеній папці
<A HREF="example/ex1.htm">Пример</A>
• сторінка в сусідній папці
<A HREF="../texts/text1.htm">Текст</A>
вийти з поточної папки
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
Посилання усередині сторінки
<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>
мітка (якір)
перехід на мітку
4. Списки
26
Марковані списки
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
unordered list (Невпорядкований список)
list item (Елемент списку)
зміна маркера:
<UL TYPE="disk">
...
</UL>
disk
circle ○
square ■
27
Нумеровані списки
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
ordered list (Упорядкований список)
зміна нумерації:
<OL TYPE=i START=3>
...
</OL>
1, i, I, a, A
28
Списки визначень
<DL>
<DT>компьютер
<DD>устройство для
обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный
диск
</DL>
definition list (список визначень)
definition term (термін)
definition description
(опис)
29
Багаторівневі списки
<UL>
<LI>Города России
<LI>Города Украины
</UL>
<OL>
<LI>Москва
<LI>Санкт-Петерург
</OL>
<OL>
<LI>Киев
<LI>Одесса
</OL>
5. Малюнки
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)
• прозорість і напівпрозорість (альфа-канал)
• немає анімації
• погано стискає дрібні малюнки
32
Фон сторінки
<BODY BACKGROUND="back.jpg">
"images/back.jpg"
"../images/back.jpg"
"http://www.vasya.ru/images/back.jpg"
Не повинно бути "швів"!! Фон не повинен
заважати!!
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
(Джерело)
34
Вирівнювання
<IMG SRC="flag.jpg" ALIGN="left">
left right
top bottom(за замовчуванням)
middle
35
Відступи
<IMG SRC="net.jpg"
ALIGN="left">
<IMG SRC="net.jpg"
ALIGN="left"
HSPACE=10
VSPACE=10>
VSPACE(vertical space)
HSPACE(horizontal space)
36
Інші атрибути
<IMG SRC="myphoto.jpg"
ALT="Моя фотографія"
WIDTH=100 HEIGHT=150
BORDER=0>
• спливаюча підказка
• напис на місці
малюнка, якщо його
немає
розміри дозволяють:
• розтягнути - стиснути
• не псувати дизайн,
якщо малюнка немає
товщина рамки
навколо малюнка
37
Малюнок-гіперпосилання
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Бесплатная почта" BORDER=0></A>
<A HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0>
</A>
локальне посилання:
посилання на інший сервер:
інакше буде синя
рамка навколо
якщо </ A> не впритул
до <IMG …>, буде «хвіст»
не буде
«хвоста»
6. Таблиці
39
Найпростіша таблиця
<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
товщина рамки
TABLE таблиця
TR = table row рядок таблиці
TD = table data дані таблиці
TH = table header заголовок (жирний, по центру)
40
Розміри
<TABLE WIDTH="60%" HEIGHT="300">
...
</TABLE>ширина в пікселях або
у % від ширини вікна
браузера
висота в пікселях
<TR HEIGHT="50">
...
</TR>
всієї таблиці:
рядки:
комірки:
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
ширина в пікселях
або у % від
ширини таблиці
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,
righttop,
middle,
bottom
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>
колір фону
фоновий малюнок
43
Відступи
<TABLE CELLSPACING = 10 CELLPADDING = 10
BGCOLOR = blue>
<TR BGCOLOR = white>
<TD WIDTH = 100>1</TD>
<TD WIDTH = 100>2</TD>
</TR>
</TABLE>
інтервал між
коміркамивідступ
всередині
комірок
CELLSPACING
CELLSPACINGCELLPADDING
CELLPADDING
44
Об'єднання клітинок
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">Привет!</TD>
</TR>
<TR>
<TD>Вася,</TD>
<TD>Петя,</TD>
<TD>Маша!</TD>
</TR>
</TABLE>
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="3">Привет!</TD>
<TD>Вася,</TD>
</TR>
<TR><TD>Петя,</TD></TR>
<TR><TD>Маша!</TD></TR>
</TABLE>
column spanохоплення стовпців
row spanохоплення рядків
45
Вкладені таблиці
<TABLE BORDER="0" CELLSPACING=10>
<TR><TD>
</TD>
<TD>
</TD></TR>
</TABLE>
<TABLE BORDER="1">
<TR><TD>Вася</TD><TD>Петя</TD></TR>
<TR><TD>Маша</TD><TD>Даша</TD></TR>
</TABLE>
<TABLE BORDER="1">
<TR><TD>1</TD><TD>22</TD></TR>
<TR><TD>333</TD><TD>4444</TD></TR>
</TABLE>
7. Фрейми
47
Фрейми
Фрейм (frame) – Це частина складної Web-сторінки,
в яку може бути завантажена інша Web-сторінка.
3 файли:
left.html – сторінка в лівій частині
right.html – сторінка в правій частині
index.html – опис структури
48
Опис структури
index.html
<HTML>
<HEAD>
<TITLE>Фреймы-столбцы</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="left.html">
<FRAME SRC="right.html" NAME="qq">
</FRAMESET>
</HTML>
<BODY>
...
</BODY>
columns
стовпці
ширина в
пікселях або %
все інше місце
source
джерелоім'я фрейма (для
посилань)
49
Кордон між фреймами
<FRAMESET COLS="30%,*" FRAMESPACING="10">
...
</FRAMESET>
<FRAMESET COLS="30%,*" FRAMEBORDER="0">
...
</FRAMESET>
межа між фреймами:
0 - невидима, 1 - видима
ширина смуги між фреймами,
за яку можна перетягнути
кордон
50
Налаштування фрейма (FRAME)
<FRAME SRC="a.htm"
MARGINWIDTH="0"
MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
прибрати відступи
від краю кадру до
вмісту
смуга прокручування:
auto - з'являється, коли треба
yes - є завжди
no - немає ніколи
заборонити
зміну
розмірів
51
Фрейми-рядки
index.html
<HTML>
<HEAD>
<TITLE>Фреймы-строки</TITLE>
</HEAD>
<FRAMESET ROWS="120,*">
<FRAME SRC="up.html">
<FRAME SRC="down.html"
NAME="qq">
</FRAMESET>
</HTML>
рядки
ширина в
пікселях або %
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
Як відкрити посилання в іншому фреймі
<FRAME ... NAME="qq">
<A HREF="chapter2.htm"
TARGET="qq">Глава 2</A>
TARGET
_blank - у новому вікні
_parent - у батьківському вікні_top - в головному вікні
8. Поняття
про Javascript
55
Що може Javascript?
• інформація статична
• немає інтерактивності (тільки перехід на
іншу сторінку)
Чим погана HTML-сторінка?
Що можна зробити за допомогою Javascript?
• зміна малюнка при наведенні миші
• випадають меню
• спливаючі підказки
• фотогалерея без перевантаження сторінки
• рух об'єкта по екрану
• Javascript може бути відключений в браузері
56
Основні принципи
• кожен елемент на сторінці (текст, малюнок,
таблиця) - це об'єкт, що має свої властивості
• властивості об'єкта можна міняти з програми
на Javascript (скрипта)
• все, що відбувається - це події
• усі події можна «обробляти», тобто якось
реагувати на них
Javascript – це мова програмування! !
HTML + Javascript = DHTML (Dynamic HTML)
57
Заміна малюнка при русі миші
<IMG SRC="image1.gif"
onMouseOver="this.src='image2.gif'"
onMouseOut="this.src='image1.gif'">
коли курсор миші
над малюнком
після відходу
миші
Події:
onMouseOver – Курсор миші над об'єктом
onMouseOut – Курсор миші пішов з об'єкту
початковий
малюнок
this – Цей об'єкт
this.src – властивість SRC цього об'єкта
