Структура web- страницы на языке html

Структура WEB-страницы на языке

HTML1. Введение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>

<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

RR GG BB

# 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


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

11

Тэг BODY – общие свойства страницы

• цвет фона и текста

• цвет гиперссылок

<BODY TEXT="white" BGCOLOR=#00FF00>

Привет!

</BODY>

<BODY TEXT="white" BGCOLOR=#00FF00>

Привет!

</BODY>

<BODY LINK="#FF8C00" VLINK=green>

...

</BODY>

<BODY LINK="#FF8C00" 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 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>

<PRE>program qq;var a, b: integer;begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',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>

23

Абзацы в HEFS

24

Линия-разделитель

<HR><HR>

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

horizontal rule

horizontal rule

ширина в пикселях или

процентах

ширина в пикселях или

процентах толщинатолщина выравниваниевыравнивание

Не рекомендуется использовать – лучше заголовки разделов!

!


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

26

Цвет гиперссылок

<BODY LINK="#FF8C00" VLINK=green ALINK=red>

...

</BODY>

<BODY LINK="#FF8C00" 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:[email protected]">Напишите мне!</A>

<A HREF="mailto:[email protected]">Напишите мне!</A>

32

Гиперссылки в HEFS

локальная ссылка

локальная ссылка

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

вставить только адрес

файла

вставить только адрес

файла


Тема 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>


Тема 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.jpg"

"images/back.jpg""../images/back.jpg""http://www.vasya.ru/images/back.jpg"

Не должно быть "швов"!! Фон не должен мешать!

!

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

вставить рисуноквставить рисунок

Автоматически вставляются размеры!

!


Тема 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,

righttop,

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> <TD WIDTH = 100>2</TD></TR></TABLE>

<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

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>

56

Таблицы в HEFS


Тема 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><FRAMESET COLS="30%,*"> <FRAME SRC="left.html"> <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><FRAMESET ROWS="120,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html" NAME="qq"></FRAMESET></HTML>

строкистрокиширина в

пикселях или %ширина в

пикселях или %

63

Сложные структуры (3 фрейма)

index.html

<FRAMESET COLS="30%,*"> <FRAME SRC="left.html">

</FRAMESET>

<FRAMESET COLS="30%,*"> <FRAME SRC="left.html">

</FRAMESET>

<FRAMESET ROWS="40,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html"></FRAMESET>

<FRAMESET ROWS="40,*"> <FRAME SRC="up.html"> <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 – в главном окне (убрать фреймы)

65

Фреймы в HEFS

66

Работа с несколькими страницами в HEFS

переключение страниц

переключение страниц

закрыть текущую страницу (Ctrl-W)закрыть текущую страницу (Ctrl-W)

просмотр активной страницы

просмотр активной страницы


Тема 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 этого объекта

Структура web- страницы на языке html

Documents