HTML

Web-страницы.
Язык HTML
1. Введение
2. Оформление текста
3. Гиперссылки
4. Списки
5. Рисунки
6. Таблицы
7. Фреймы
8. Понятие о JavaScript

Язык 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>
<HTML>
<HEAD>
<TITLE>Моя страница</TITLE>
</HEAD>
<BODY>
Привет!
…
</BODY>
</HTML>
index.html
sail.jpg man.jpg sunset.jpg
clock.avi
ball.swfbee.wav
images

6
Тэги
Тэг – это команда языка HTML, которую выполняет
браузер:
• непарные тэги
• парные тэги (контейнеры)
<IMG SRC = "vasya.jpg"><IMG SRC = "vasya.jpg">
вставить
рисунок
вставить
рисунок
<TABLE>
...
</TABLE>
<TABLE>
...
</TABLE>
открывающийоткрывающий
закрывающийзакрывающий
область действия
тэга: описание
таблицы
область действия
тэга: описание
таблицы

7
Простейшая Web-страница
<HTML>
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
first.html
<HEAD>
</HEAD>
<HEAD>
</HEAD>
шапка («голова»)шапка («голова»)
<BODY>
Привет!
</BODY>
<BODY>
Привет!
</BODY>
основная
часть («тело»)
основная
часть («тело»)

8
Редактор HEFS
файловые
операции
файловые
операции
буфер
обмена
буфер
обмена
один
экран
один
экран
запуск
браузера (F9)
запуск
браузера (F9)назадназад впередвперед
текстовый
редактор
текстовый
редактор
браузер (IE)браузер (IE)
отменаотмена

9
Кодирование цвета
• имена
red, green, blue, magenta, black,
• шестнадцатеричные коды
white
# F A 8 0 7 2# F A 8 0 7 2
R G B
# F F 0 0 0 0# F F 0 0 0 0
# F F F F F F# F F F F F F
# 0 0 F F F F# 0 0 F F F F
# 0 0 0 0 0 0# 0 0 0 0 0 0
# A A A A A A# A A A A A A

Язык HTML
Тема 2. Оформление текста

11
Тэг BODY – общие свойства страницы
• цвет фона и текста
• цвет гиперссылок
<BODY TEXT="white"
BGCOLOR=#00FF00>
Привет!
</BODY>
<BODY TEXT="white"
BGCOLOR=#00FF00>
Привет!
</BODY>
<BODY LINK="#FF8C00"
VLINK=green>
...
</BODY>
VLINK=green>
...
</BODY>
цвет
текста
цвет
текста
цвет фонацвет фона
посещенные ссылки
(visited link)
посещенные ссылки
(visited link)
цвет
ссылок
цвет
ссылок
атрибуты тэгаатрибуты тэга

12
Вставка тэгов в HEFS

13
Вставка атрибутов в HEFS
вставить
только код
цвета
вставить
только код
цвета

14
• цвет текста
• размер шрифта
Тэг FONT – свойства блока текста
Привет!
<FONT COLOR=red>
Как дела?
</FONT>
Привет!
<FONT COLOR=red>
Как дела?
</FONT>
Привет!
<FONT COLOR=red
SIZE=6>
Как дела?
</FONT>
Привет!
<FONT COLOR=red
SIZE=6>
Как дела?
</FONT> от 1 до 7
(3 – нормальный)
от 1 до 7
(3 – нормальный)

15
Стили оформления
жирный (bold) <B>Вася</B> Вася
курсив (italic) <I>Вася</I> Вася
подчеркивание
(underline) <U>Вася</U> Вася
зачеркивание
(strike out) <S>Вася</S> Вася
верхний индекс
(superscript) Вася<SUP>2</SUP> Вася2
нижний индекс
(subscript) Вася<SUB>2</SUB> Вася2

16
Форматированный текст (листинги программ)
program qq;
var a, b: integer;
begin
writeln("Введите два числа");
read(a,b);
writeln(a,'+',b,'=',a+b);
end.
program qq;
var a, b: integer;
begin
read(a,b);
end.
<PRE>
program qq;
var a, b: integer;
begin
read(a,b);
end.
</PRE>
<PRE>
program qq;
var a, b: integer;
begin
read(a,b);
end.
</PRE>
отформатированный текст
(preformatted)
отформатированный текст
(preformatted)

17
Заголовки: H1 … H6
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
выравнивание:
<H1 ALIGN=center>История</H1><H1 ALIGN=center>История</H1>
left,
center,
right
left,
center,
right

18
Форматирование текста в HEFS
Ctrl-BCtrl-B

19
Специальные символы
Символ HTML-код Название
¡ или   неразрывный пробел
§ § параграф
© © или © символ авторского права
« « или « левая русская кавычка
® ® или ® зарегистрированная торговая марка
° ° градус
± ± плюс-минус
² ² квадрат
³ ³ куб
» » или » правая русская кавычка
¼ ¼ четверть
½ ½ половина
¾ ¾ три четверти
× × знак умножения
÷ ÷ знак деления

20
Специальные символы в HEFS

21
Абзацы
• переход на новую строку
• абзац (с отступами)
Одно физическое тело захотело
поменять три своих
старых варежки на что-нибудь
хорошее.
<BR>
До самого вечера тело с
варежками ...
поменять три своих
старых варежки на что-нибудь
хорошее.
<BR>
До самого вечера тело с
варежками ...
<P>
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>
<P>
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>

22
Выравнивание
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
</P>
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
</P>
left по левой границе
right по правой границе
center по центру
justify по ширине
Не используйте
выравнивание по
ширине для узких
столбцов!
!
атрибут тэга <P>атрибут тэга <P>

24
Линия-разделитель
<HR><HR>
<HR WIDTH="60%" SIZE="3" ALIGN="right"><HR WIDTH="60%" SIZE="3" ALIGN="right">
horizontal
rule
horizontal
rule
ширина в
пикселях или
процентах
ширина в
пикселях или
процентах толщинатолщина выравниваниевыравнивание
Не рекомендуется
использовать –
лучше заголовки
разделов!
!

Язык HTML
Тема 3. Гиперссылки

26
Цвет гиперссылок
VLINK=green
ALINK=red>
...
</BODY>
VLINK=green
ALINK=red>
...
</BODY>
LINK ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные ссылки

27
Ссылки на другие страницы сайта
<A HREF="table.htm">Таблицы</A><A HREF="table.htm">Таблицы</A>
• страница в той же папке
anchor (якорь)anchor (якорь)
hyper reference
(гиперссылка)
hyper reference
(гиперссылка)
• страница во вложенной папке
<A HREF="example/ex1.htm">Пример</A><A HREF="example/ex1.htm">Пример</A>
• страница в соседней папке
<A HREF="../texts/text1.htm">Текст</A><A HREF="../texts/text1.htm">Текст</A>
выйти из текущей папкивыйти из текущей папки

28
Примеры (ссылки из файла rock.html)
story.html
stories–
novels–
new–
old–
list.html
sea.html
verse.html
rock.htmlrock.html

29
Ссылки на другие сайты
<A HREF="http://www.mail.ru">Почта</A><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/text/a.htm">
Васин текст</A>
• на файл для скачивания
<A HREF="http://www.vasya.ru/prog.zip">
Скачать</A>
<A HREF="http://www.vasya.ru/prog.zip">
Скачать</A>

30
Ссылки внутри страницы
<A NAME="up"></A>
<A HREF="#chap1">Глава 1</A><br>
<A NAME="chap1"></A>
<H1>Глава 1</H1>
Это текст главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.<BR>
<A HREF="#up">Наверх</A>
<A NAME="up"></A>
• в другом файле
<A HREF="texts.html#color">Цвет текста</A><A HREF="texts.html#color">Цвет текста</A>
метка (якорь)метка (якорь)
переход на меткупереход на метку

31
Запуск почтовой программы
<A HREF="mailto:vasya@mail.ru">
Напишите мне!
</A>
<A HREF="mailto:vasya@mail.ru">
Напишите мне!
</A>

32
Гиперссылки в HEFS
локальная
ссылка
локальная
ссылка
Автоматически строится относительный адрес!!
Ctrl-A гиперссылка на выделенный блок, адрес
вводить вручную
вставить
только адрес
файла
вставить
только адрес
файла

Язык HTML
Тема 4. Списки

34
Маркированные списки
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
unordered list
(неупорядоченный
список)
unordered list
(неупорядоченный
список)
list item
(элемент
списка)
list item
(элемент
списка)
изменение маркера:
<UL TYPE="disk">
...
</UL>
<UL TYPE="disk">
...
</UL>
disk •
circle ○
square ■

35
Нумерованные списки
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
ordered list
(упорядоченный
список)
ordered list
(упорядоченный
список)
изменение нумерации:
<OL TYPE=i START=3>
...
</OL>
<OL TYPE=i START=3>
...
</OL>
1, i, I, a, A1, i, I, a, A

36
Списки определений
<DL>
<DT>компьютер
<DD>устройство для
обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный
диск
</DL>
<DL>
<DT>компьютер
<DD>устройство для
обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный
диск
</DL>
definition list (список определений)definition list (список определений)
definition term
(термин)
definition term
(термин)
definition description
(описание)
definition description
(описание)

37
Многоуровневые списки
<UL>
<LI>Города России
<LI>Города Украины
</UL>
<UL>
<LI>Города России
<LI>Города Украины
</UL>
<OL>
<LI>Москва
<LI>Санкт-Петерург
</OL>
<OL>
<LI>Москва
<LI>Санкт-Петерург
</OL>
<OL>
<LI>Киев
<LI>Одесса
</OL>
<OL>
<LI>Киев
<LI>Одесса
</OL>

38
Списки в HEFS
Ctrl-L вставить элемент списка <LI>

Язык HTML
Тема 5. Рисунки

40
Форматы рисунков
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)
• прозрачность и полупрозрачность (альфа-канал)
• нет анимации
• плохо сжимает мелкие рисунки

41
Фон страницы
<BODY BACKGROUND="back.jpg"><BODY BACKGROUND="back.jpg">
"images/back.jpg"
"../images/back.jpg"
"http://www.vasya.ru/images/back.jp
g"
"images/back.jpg"
"../images/back.jpg"
"http://www.vasya.ru/images/back.jp
g"
Не должно быть "швов"!! Фон не должен
мешать!
!

42
Рисунки в документе
<IMG SRC="flag.jpg"><IMG SRC="flag.jpg">
<IMG SRC="images/flag.jpg"><IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg"><IMG SRC="../images/flag.jpg">
<IMG SRC="http://www.vasya.ru/img/flag.jpg"><IMG SRC="http://www.vasya.ru/img/flag.jpg">
из той же папки:
из другой папки:
с другого сервера:
image
(изображение
)
image
(изображение
)
source
(источник)
source
(источник)

43
<IMG SRC="flag.jpg" ALIGN="left"><IMG SRC="flag.jpg" ALIGN="left">
left right
top bottom
(по умолчанию) middle

44
Отступы
<IMG SRC="net.jpg"
ALIGN="left">
<IMG SRC="net.jpg"
ALIGN="left">
<IMG SRC="net.jpg"
ALIGN="left"
HSPACE=10
VSPACE=10>
<IMG SRC="net.jpg"
ALIGN="left"
HSPACE=10
VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal space)

45
Другие атрибуты
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
WIDTH=100 HEIGHT=150
BORDER=0>
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
WIDTH=100 HEIGHT=150
BORDER=0>
• всплывающая
подсказка
• надпись на месте
рисунка, если его нет
• всплывающая
подсказка
• надпись на месте
рисунка, если его нет
размеры позволяют:
• растянуть - сжать
• не портить дизайн,
если рисунка нет
размеры позволяют:
• растянуть - сжать
• не портить дизайн,
если рисунка нет
толщина рамки
вокруг рисунка
толщина рамки
вокруг рисунка

46
Рисунок-гиперссылка
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Бесплатная почта" BORDER=0></A>
<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 HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0>
</A>
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя
рамка вокруг
иначе будет синяя
рамка вокруг
если </A> не вплотную к
<IMG …>, будет «хвост»
если </A> не вплотную к
<IMG …>, будет «хвост»
не будет
«хвоста»
не будет
«хвоста»

47
Рисунки в HEFS
вставить
рисунок
вставить
рисунок
Автоматически вставляются
размеры!
!

Язык HTML
Тема 6. Таблицы

49
Простейшая таблица
<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
толщина рамкитолщина рамки
TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)

50
Размеры
<TABLE WIDTH="60%" HEIGHT="300">
...
</TABLE>
<TABLE WIDTH="60%" HEIGHT="300">
...
</TABLE>
ширина в пикселях
или в % от
ширины окна
браузера
или в % от
ширины окна
браузера
высота в пикселяхвысота в пикселях
<TR HEIGHT="50">
...
</TR>
<TR HEIGHT="50">
...
</TR>
всей таблицы:
строки:
ячейки:
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
или в % от ширины
таблицы
или в % от ширины
таблицы

51
<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 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>
<TABLE ALIGN="center">
...
</TABLE>
всей таблицы:
информации в ячейках:
left,
center,
right
left,
center,
right
left,
center,
right
left,
center,
right
top,
middle,
bottom
top,
middle,
bottom

52
Фон и цвет текста
<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>
<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>
цвет фонацвет фона
фоновый
рисунок
фоновый
рисунок

53
Отступы
<TABLE CELLSPACING = 10 CELLPADDING = 10
BGCOLOR = blue>
<TR BGCOLOR = white>
<TD WIDTH = 100>1</TD>
</TR>
</TABLE>
<TABLE CELLSPACING = 10 CELLPADDING = 10
BGCOLOR = blue>
<TR BGCOLOR = white>
</TR>
</TABLE>
интервал между
ячейками
интервал между
ячейками
отступ внутри
ячеек
отступ внутри
ячеек
CELLSPACING
CELLSPACINGCELLPADDING
CELLPADDING

54
Объединение ячеек
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">Привет!</TD>
</TR>
<TR>
<TD>Вася,</TD>
<TD>Петя,</TD>
<TD>Маша!</TD>
</TR>
</TABLE>
<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>
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="3">Привет!</TD>
<TD>Вася,</TD>
</TR>
<TR><TD>Петя,</TD></TR>
<TR><TD>Маша!</TD></TR>
</TABLE>
column span
охват столбцов
column span
охват столбцов
row span
охват строк
row span
охват строк

55
Вложенные таблицы
<TABLE BORDER="0" CELLSPACING=10>
<TR><TD>
</TD>
<TD>
</TD></TR>
</TABLE>
<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>Вася</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>
<TABLE BORDER="1">
<TR><TD>1</TD><TD>22</TD></TR>
<TR><TD>333</TD><TD>4444</TD></TR>
</TABLE>

Язык HTML
Тема 7. Фреймы

58
Фреймы
Фрейм (frame) – это часть сложной Web-страницы, в
которую может быть загружена другая Web-
страница.
3 файла:
left.html – страница в левой части
right.html – страница в правой части
index.html – описание структуры

59
Описание структуры
index.html
<HTML>
<HEAD>
<TITLE>Фреймы-столбцы</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="left.html">
<FRAME SRC="right.html" NAME="qq">
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>Фреймы-столбцы</TITLE>
</HEAD>
<FRAME SRC="right.html" NAME="qq">
</FRAMESET>
</HTML>
<BODY>
...
</BODY>
<BODY>
...
</BODY>
columns
столбцы
columns
столбцы
ширина в
пикселях или %
ширина в
все остальное
место
все остальное
место
source
источник
source
источник
имя фрейма
(для ссылок)
имя фрейма
(для ссылок)

60
Граница между фреймами
<FRAMESET COLS="30%,*" FRAMESPACING="10">
...
</FRAMESET>
<FRAMESET COLS="30%,*" FRAMESPACING="10">
...
</FRAMESET>
<FRAMESET COLS="30%,*" FRAMEBORDER="0">
...
</FRAMESET>
<FRAMESET COLS="30%,*" FRAMEBORDER="0">
...
</FRAMESET>
граница между фреймами:
0 – невидима, 1 - видима
граница между фреймами:
0 – невидима, 1 - видима
ширина полосы между
фреймами, за которую
можно перетащить границу
ширина полосы между
фреймами, за которую
можно перетащить границу

61
Настройка фрейма (FRAME)
<FRAME SRC="a.htm"
MARGINWIDTH="0"
MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
<FRAME SRC="a.htm"
MARGINWIDTH="0"
MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
убрать отступы
от края фрейма
до содержимого
убрать отступы
от края фрейма
до содержимого
полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда
полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда
запретить
изменение
размеров
запретить
изменение
размеров

62
Фреймы-строки
index.html
<HTML>
<HEAD>
<TITLE>Фреймы-строки</TITLE>
</HEAD>
<FRAMESET ROWS="120,*">
<FRAME SRC="up.html">
<FRAME SRC="down.html"
NAME="qq">
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>Фреймы-строки</TITLE>
</HEAD>
<FRAME SRC="down.html"
NAME="qq">
</FRAMESET>
</HTML>
строкистроки
ширина в
ширина в

63
Сложные структуры (3 фрейма)
index.html
</FRAMESET>
</FRAMESET>
<FRAME SRC="down.html">
</FRAMESET>
<FRAME SRC="down.html">
</FRAMESET>

64
Как открыть ссылку в другом фрейме
<FRAME ... NAME="qq"><FRAME ... NAME="qq">
<A HREF="chapter2.htm"
TARGET="qq">Глава 2</A>
<A HREF="chapter2.htm"
TARGET="qq">Глава 2</A>
TARGET
_blank – в новом окне
_parent – в родительском окне
_top – в главном окне
(убрать фреймы)

66
Работа с несколькими страницами в HEFS
переключение
страниц
переключение
страниц
закрыть текущую
страницу (Ctrl-W)
закрыть текущую
страницу (Ctrl-W)
просмотр активной
страницы
просмотр активной
страницы

Язык HTML
Тема 8. Понятие о Javascript

68
Что может Javascript?
• информация статична
• нет интерактивности (только переход на
другую страницу)
Чем плоха HTML-страница?
Что можно сделать с помощью Javascript?
• изменение рисунка при наведении мыши
• выпадающие меню
• всплывающие подсказки
• фотогалерея без перегрузки страницы
• движение объекта по экрану
• Javascript может быть отключен в браузере

69
Основные принципы
• каждый элемент на странице (текст,
рисунок, таблица) – это объект, имеющий
свои свойства
• свойства объекта можно менять из
программы на Javascript (скрипта)
• все, что происходит – это события
• все события можно «обрабатывать», т.е.
как-то реагировать на них
Javascript – это язык программирования!!
HTML + Javascript = DHTML (Dynamic HTML)

70
Замена рисунка при движении мыши
<IMG SRC="image1.gif"
onMouseOver="this.src='image2.gif'"
onMouseOut="this.src='image1.gif'">
<IMG SRC="image1.gif"
onMouseOver="this.src='image2.gif'"
onMouseOut="this.src='image1.gif'">
когда курсор мыши
над рисунком
когда курсор мыши
над рисунком
после ухода
мыши
после ухода
мыши
События:
onMouseOver – курсор мыши над объектом
onMouseOut – курсор мыши ушел с объекта
начальный
рисунок
начальный
рисунок
this – этот объект
this.src – свойство SRC этого объекта

HTML

More Related Content

What's hot (19)

Similar to HTML (20)

HTML