Листинг 1.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<ТIТLЕ>Пример Web-страницы</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Справочник по HTML</H1>
<Р>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях,
применяемых при создании Web-страниц.
В частности, о языке
<STRONG>HTML</STRONG>.</P>
</BODY>
</HTML>
Листинг 1.2
<Н1>Справочник по HTML</H1>
<Р>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях,
применяемых при создании Web-страниц. В частности, о языке
<STRONG>HTML</STRONG>.</P>
Листинг 1.3
<BODY>
<Н1>Справочник по HTML</H1>
<Р>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях,
применяемых при создании Web-страниц. В частности, о языке
< STRONG>HTML< / STRONG. </Р>
</BODY>
Листинг 1.4
<!DOCTYPE html> <HTML> <HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<ТIТLЕ>Пример 1л1еL-страницы</ТIТLЕ>
</HEAD>
<BODY>
.......
</BODY>
</HTML>
Листинг 2.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<ТIТLЕ>Справочник по HTML и CSS</TITLE>
</HEAD>
<BODY>
<Р>Справочник по HTML и CSS</P>
<Р>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях,
применяемых при создании Web-страниц. А именно, о языках HTML и
CSS.</P>
<Р>Русская Википедия определяет термин HTML так:</Р>
<P>HTML (от англ. HyperText Markup Language — язык разметки
гипертекста) — стандартный язык разметки документов во Всемирной
паутине.</Р>
<Р>Пожалуй, ни убавитm ни прибавитm...</Р>
<P>HTML позволяет формироватm на Web-страницах следующие
элементы:</Р>
<Р>абзацы;</Р>
<Р>заголовки;</Р>
<Р>цитаты;</Р>
<Р>списки;</Р>
<Р>таблицы;</Р>
<Р>графические изображения;</Р>
<Р>аудио- и видеоролики.</Р>
<Р>Основные принципы HTML</P>
<Р>...</P>
<Р>Теги HTML</P>
<P>!DOCTYPE, BODY, EM, HEAD, HTML, МЕТА, Р, STRONG, TITLE</P>
</BODY>
</HTML>
Листинг 2.2
<Н1>Я — заголовок Web-страницы, самый главный</Н1>
<Н2>Я — заголовок раздела</Н2>
<НЗ>Я — заголовок главы</НЗ>
<Н4>Я — заголовок крупного параграфа</Н4>
<Н5>Я — заголовок параграфа поменыпе</Н5>
<Н6>А я — заголовок маленLкого параграфа. Ой, какие все вокруг
большие!..</Н6>
Листинг 2.3
<Н1>Справочник по HTML и CSS</H1>
...
<Н2>Основные принципы HTML</H2>
...
<Н2>Теги HTML</H2>
Листинг 2.4
<UL>
<LI>Я — первый пункт маркированного списка.</LI>
<LI>Я — второй пункт маркированного списка. </LI>
<LI>Я — третий пункт маркированного списка. </LI> </UL>
<0L>
<LI>Я — первый пункт нумерованного списка.</LI>
<LI>Я — второй пункт нумерованного списка.</LI>
<LI>Я — третий пункт нумерованного списка.</LI>
</0L>
Листинг 2.5
<UL>
<LI>Я — первый пункт внешнего списка.</LI>
<LI>Я — второй пункт внешнего списка.
<UL>
<LI>Я — первый пункт вложенного списка.</LI>
<LI>Я — второй пункт вложенного списка.</LI>
<LI>Я — третий пункт вложенного списка.</LI>
</UL>
<LI>Я — третий пункт внешнего списка. </LI>
</UL>
Листинг 2.6
<DL>
<DT>Содержимое</DT>
<DD>Информация, отображаемая на Web-странице</DD>
<DT>Представление</DT>
<DD>Ha6op правил, определяющих формат отображения содержимого</DD>
<DT>Поведение</DT>
<DD>Ha6op правил, определяющих реакцию Web-страницы или ее элементов на
действия посетителя</DD>
</DL>
Листинг 2.7
<UL>
<LI>абзацы;</LI>
<LI>заголовки;</LI>
<LI>цитаты;</LI>
<LI>списки;</LI>
<LI>таблицы;</LI>
<LI>графические изображения;</LI>
<LI>аудио- и видеоролики.</LI>
</UL>
Листинг 2.8
<BLOCKQUOTE>
<Р>Я — начало болLшой цитаты.</Р>
<Р>Я — продолжение болLшой цитаты.</Р>
</BLOCKQUOTE>
Листинг 2.9
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки
гипертекста) — стандартный язык разметки документов во Всемирной
паутине.</Р>
</BLOCKQUOTE>
Листинг 2.10
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Teг TITLE</TITLE>
</HEAD>
<BODY>
<Н1>Тег TITLE</H1>
<Р>Тег TITLE служит для указания названия Web-страницы. Он ставится в
ее секции заголовка.</Р>
<Н6>Пример:</Н6>
<P>!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</P>
</BODY>
</HTML>
Листинг 2.11
<РRЕ>Я — текст, который будет выведен на Web-страницу со всеми
отступами и
переносами
строк.</PRE>
Листинг 2.12
<!DOCTYPE html>
<HTML>
...
<Н6>Пример:</Н6>
<PRE>!HEAD!
!TITLE!Я - заголовок Web-страницы!/TITLE!
!HEAD!</PRE>
</BODY>
</HTML>
Листинг 2.13
<Р>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях,
применяемых при создании Web-страниц. А именно, о языках HTML и
CSS.</P>
<HR>
<Р>Русская Википедия определяет термин HTML так:</Р>
...
<Р>Пожалуй, ни убавить ни прибавить...</Р>
<HR>
<P>HTML позволяет формировать на Web-страницах следующие элементы:</Р>
Листинг 3.1
<P><STRONG>Я — очень важный текст и поэтому набран полужирным
шрифтом!</STRONG> Прочитайте меня в первую очередL!</Р>
<Р><ЕМ>А я — менее важный текст и набран курсивом. </ЕМ> Не забудьте
прочитать меня, но можете сделать это потом.</Р>
Листинг 3.2
<Р>Теги HTML служат для создания элементов Web-страниц.
<STRONG>Соблюдайте порядок вложенности тегов!</STRONG><P>
<Р>Тег <CODE>P</CODE> служит для создания <DFN>a63aua</DFN> HTML.</P>
<Р>Язык <ABBR>HTML</ABBR> служит для создания <INS>содержимого</INS>
Web-страниц.</Р>
<Р>Наберите в Web-обозревателе интернет-адрес
<KBD>
http://www.w3.org</KBD>.<P>;
Листинг 3.3
<Р>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях,
применяемых при создании Web-страниц. А именно, о языках <DFN>HTML</DFN>
и <DFN>CSS</DFN>.</P>
...
<P><CODE>!DOCTYPE</CODE>, <CODE>BODY</CODE>, <CODE>EM</CODE>,
<CODE>HEAD</CODE>, <CODE>HTML</CODE>, <CODE>META</CODE>, <CODE>P</CODE>,
<CODE>STRONG</CODE>, <CODE>TITLE</CODEX/P>
Листинг 3.4
<!DOCTYPE html>
<HTML>
...
<BODY>
<Н6>Пример:</Н6>
<PRE><HEAD>
<TITLE>Я - заголовок Web-Cтpaницы< /TITLE>
<HEAD></PRE>
...
</BODY>
</HTML>
Листинг 4.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Teг IMG</TITLE>
</HEAD>
<BODY>
<Hl>Teг IMG</H1>
<P>Teг IMG служит для вставки на Web-страницу графического
изображения.</Р>
<Н6>Пример:</Н6>
<PRE><P><IMG SRC="image.gif"></P></PRE>
<Н6>Результат:</Н6>
<P><IMG SRC="image.gif"></P>
</BODY>
</HTML>
Листинг 4.2
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Teг AUDIO</TITLE>
</HEAD>
<BODY>
<Hl>Teг AUDIO</H1>
<P>Teг AUDIO служит для вставки на Web-страницу аудиоролика.</Р>
<Н6>Пример:</Н6>
<PRE><AUDIO SRC="sound.wav"
CONTROLS></AUDIO></PRE>
<Н6>Резулmтат:</Н6>
<AUDIO SRC="sound.wav" CONTROLS></AUDIO>
</BODY>
</HTML>
Листинг 4.3
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Teг VIDEO</TITLE>
</HEAD>
<BODY>
<Hl>Teг VIDEO</H1>
<P>Teг VIDEO служит для вставки на Web-страницу видеоролика.</Р>
<Н6>Пример:</Н6>
<PRE><VIDEO SRC="film.ogg"
CONTROLS></VIDEO></PRE>
<Нб>РезулLтат:</Н6>
<VIDEO SRC="film.ogg" CONTROLS></VIDEC>
</BODY>
</HTML>
Листинг 5.1
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
Листинг 5.2
<TABLE>
<TR>
<ТН></ТН>
<ТНХ/ТН>
<TX></TX>
</TR>
<TR>
<TD></TD>
<TDX/TD>
<TDX/TD>
</TR>
<TR>
<TD></TD>
<TDX/TD>
<TDX/TD>
</TR>
</TABLE>
Листинг 5.3
<TABLE>
<TR>
<ТН>Столбец 1</ТН>
<ТН>Столбец 2</ТН>
<ТН>Столбец 3</ТН>
</TR>
<TR>
<ТD>Ячейка 1.1</TD>
<ТD>Ячейка 1.2</TD>
<ТD>Ячейка 1.3</TD>
</TR>
<TR>
<ТD>Ячейка 2.1</TD>
<ТD>Ячейка 2.2</TD>
<ТD>Ячейка 2.3</TD>
</TR>
</TABLE>
Листинг 5.4
<TABLE>
<TR>
<ТD>Ячейка <ЕМ>1.1</EM></TD>
<ТD>Ячейка <ЕМ>1.2</EM></TD>
<ТD>Ячейка <ЕМ>1.3</EM></TD>
</TR>
...
</TABLE>
Листинг 5.5
<TD>
<Н4>Это болLшой текст</Н4>
<Р>Это начало болLшого текста, представляющего собой содержимое ячейки
таблицы.</Р>
<Р>Это продолжение болLшого текста, представляющего собой содержимое
ячейки таблицы.</Р>
<P><IMG SRC="picture.jpg" АLТ="Иллюстрация к большому тексту"></Р>
<Р>А это <STRONG>дoлгoждaннoe окончание</STRONG> болLшого текста.</Р>
</TD>
Листинг 5.6
<Р>Пожалуй, ни убавить ни прибавить ...</Р>
<HR>
<Р>Список версий HTML:</P>
<TABLE>
<TR>
<ТН>Версия HTML</TH>
<ТН>Год выхода</ТН>
<ТН>Особенности</ТН>
</TR>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<ТD>Официально не была стандартизована</ТD>
</TR>
<TR>
<TD>2.0</TD>
<TD>1995</TD>
<ТD>Первая стандартизованная версия</ТD>
</TR>
<TR>
<TD>3.2</TD>
<TD>1997</TD>
<ТD>Поддержка таблиц и графики</ТD>
</TR>
<TR>
<TD>4.0</TD>
<TD>1997</TD>
<TD>"Очищен" от устаревших тегов</TD>
</TR>
<TR>
<TD>4.0K/TD>
<TD>1999</TD>
<TD>B основном, исправление ошибок</ТD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD>B разработке</ТD>
</TR>
</TABLE>
<P>HTML позволяет формироватL на Web-страницах следующие элементы:</Р>
Листинг 5.7
<TABLE>
<CAPTION>Это таблица</САРТION>
<TR>
<ТН>Столбец 1</ТН>
<ТН>Столбец 2</ТН>
<ТН>Столбец 3</ТН>
</TR>
...
</TABLE>
Листинг 5.8
<TABLE>
<THEAD>
<TR>
<ТН>Столбец 1</ТН>
<ТН>Столбец 2</ТН>
<ТН>Столбец 3</ТН>
</TR>
</THEAD>
<TBODY>
<TR>
<ТD>Ячейка 1.1</TD>
<ТD>Ячейка 1.2</TD>
<ТD>Ячейка 1.3</TD>
</TR>
<TR>
<ТD>Ячейка 2.1</TD>
<ТD>Ячейка 2.2</TD>
<ТD>Ячейка 2.3</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<ТD>Итог по ячейке 2.1</TD>
<ТD>Итог по ячейке 2.2</TD>
<TD>Итог по ячейке 2.3</TD>
</TR>
</TFOOT>
</TABLE>
Листинг 5.9
<Р>Пожалуй, ни убавить ни прибавить...</Р>
<HR>
<TABLE>
<САРТION>Список версий HTML:</CAPTION>
<THEAD>
<TR>
<ТН>Версия HTML</TH>
<ТН>Год выхода</ТН>
<ТН>собенности</ТН>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<ТD>Официально не была стандартизована</ТD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD>B разработке</ТD>
</TR>
</TBODY>
</TABLE>
<P>HTML позволяет формироватm на Web-страницах следующие элементы:</Р>
Листинг 5.10
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
</TR>
<TR>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
</TR>
</TABLE>
Листинг 5.11
<TR>
<TD>1</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
Листинг 5.12
<TR>
<TD ROWSPAN="2">1 + 6</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD COLSPAN="2">4 + 5</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
Листинг 6.1
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки
гипертекста) — стандартный язык разметки документов во Всемирной
паутине. (<А HREF="http://ru.wikipedia.org/wiki/HTML"
TARGET="_blank">BcЯ статья</А>)</Р>
</BLOCKQUOTE>
Листинг 6.2
<IMG SRC="map.gif" USEMAP="#samplemap">
...
<МАР NAME="samplemap">
<AREA SHAPE="circle" COORDS="50,50,30" HREF="page1.html">
<AREA SHAPE="circle" COORDS="50,150,30" HREF="page2.html">
<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>
<AREA SHAPE="rect" COORDS="0,100,30, 100" HREF="appendix.html"
TARGET="_blank"> </MAP>
Листинг 6.3
<BODY>
<РХА HREF="css index.htm">CSS</A> |
<А HREF="samples_index.htm">Примеры</A> |
<А HREF="about.htm"X) разработчиках</А></Р>
<Н1>Справочник по HTML и CSS</H1>
Листинг 6.4
<Р>Окончание второй главы...</Р>
<А ID="chapTeг3"></A>
<Р>Начало третmей главы...<Р>
Листинг 7.1
<селектор> {
<атрибут стиля 1>: <значение 1>;
<атрибут стиля 2>: <значение 2>;
<атрибут стиля n-1>: <значение n-1>;
<атрибут стиля n>: <значение n>
Листинг 7.2
.attention { color: #FF0000;
font-style: italic }
...
<P><STRONG CLASS="attention">Стилевой класс требует явной привязки
атрибутом тега CLASS !</STRONGЮБ/P>
Листинг 7.3
.attention { color: #FF0000;
font-style: italic } .bigtext { font-size: large }
...
<P><STRONG CLASS="attention bigtext">Стилевой класс требует явной
привязки атрибутом тега CLASS ! </STRONG></P>
Листинг 7.4
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
P EM { color: #0000FF }
Листинг 7.5 |
<HEAD>
...
<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">
</HEAD>
Листинг 7.6
<HEAD>
...
<STYLE>
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
P EM { color: #0000FF }
</STYLE>
...
</HEAD>
Листинг 7.7
<HEAD>
...
<LINK REL="stylesheet" HREF="stylesl.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="styles2.css" TYPE="text/css">
...
<STYLE>
...
</STYLE>
...
</HEAD>
Листинг 7.8
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
Листинг 7.9
<STYLE>
.redtext { color: #0000FF }
EM { font-size: smaller }
</STYLE>
Листинг 7.10
.redtext { color: #FF0000;
font-weight: normal }
EM { color: #00FF00;
font-weight: bold }
Листинг 7.11
/*
Это комментарий,
состоящий из
несколmких строк.
*/
Р { color: #0000FF }
Листинг 8.1
.bolded { font-weight: bold }
...
<P><SPAN CLASS="bolded">Представление</SPAN> создается с помощью стилей
CSS.</P>
Листинг 8.2
BODY { color: #ЗВ4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif }
P { font-size: 12pt }
HI, H2, H6 { font-weight: normal;
font-family: Arial, sans-serif }
HI { font-size: 20pt }
H2 { font-size: 18pt }
H6 { font-size: 12pt }
TABLE { font-size: 10pt }
BLOCKQUOTE P,
ADDRESS { font-size: 10pt;
font-style: italic }
Листинг 8.3
Н1, Н2, Н6 { font-weight: normal;
font-family: Arial, sans-serif;
letter-spacing: lmm;
text-shadow: #CDD9DB lpx lpx }
Листинг 9.1
.squared { list-style-type: square }
...
<UL>
<LI>Первый пункт</LI>
<LI CLASS="squared">Bторой пункт (с другим маркером)</LI>
<LI>Третий пункт</LI>
</UL>
Листинг 9.2
<UL>
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index. htm">CSS</A></LI>
<LI><A HREF="samples_index.htm">npMMepbi</A></LI>
<LI><A HREF="about.htm"X) разработчиках</А></LI>
</UL>
Листинг 9.3
#navbar { font-family: Arial, sans-serif;
font-size: 14pt;
text-transform: uppercase;
list-style-type: none }
Листинг 10.1
<DIV>
<НЗ>Это заголовок</НЗ>
<Р>Это первый абзац.<Р>
<Р>Это второй абзац.<Р>
</DIV>
Листинг 10.2
<DIV>
<TABLE>
<CAPTION>Это таблица</САРТION>
<TR>
<ТН>Это первый столбец</ТН>
<ТН>Это второй столбец</ТН>
</TR>
</TABLE>
</DIV>
Листинг 10.3
<DIV STYLE="text-align: cenTeг">
<VIDEO SRC="film.ogg" CONTROLS>
</VIDEO>
<Р>Щелкните кнопку воспроизведения, чтобы просмотретL фильм.</Р>
</DIV>
Листинг 10.4
<DIV ID="cheader">
<Н1>Справочник по HTML и CSS</H1>
<DIV ID="cnavbar">
<UL ID="navbar">
<LIЮБA HREF="index.htm">HTML</AЮБ/LI>
<LIЮБA HREF="css_index. htm">CSS</AЮБ/LI>
<LIЮБA HREF="samples_index.htm">Примеры</A></LI>
<LI><A HREF="about.htm">O разработчиках</А></LI>
</UL>
<DIV ID="cmain">
<Р>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях,
применяемых при создании Web-страниц. А именно, о языках
<DFN>HTML</DFN> и <DFN>CSS</DFN>.</P>
<HR>
<Н2>Теги HTML</H2>
<P><CODE>! DOCTYPE</CODE>,
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>,
<CODE>BODY</CODE>, <CODE>EM</CODE>, <CODE>HEAD</CODE>,
<CODE>HTML</CODE>, <CODE><A HREF="tags/t_img.htm">IMG</A></CODE>,
<CODE>META</CODE>, <CODE>P</CODE>, <CODE>STRONG</CODE>,
<CODE><A HREF="tags/t_title.htm">TITLE</A></CODE>,
<CODE><A HREF="tags/t_video.htm">VIDEO</A></CODE></P>
<DIV ID="ccopyright">
<ADDRESS>Bce права защищены.<BR>©
<A HREF="mailto:user@mailserver.ru">читaтeли</A>, 2010 год.</ADDRESS>
</DIV>
Листинг 10.5
#cheader { width: 100% }
#cnavbar { width: 30%;
min-width: 240px;
float: left }
#cmain { width: 70%;
float: left }
#ccopyright { width: 100%;
clear: both }
Листинг 10.6
#cnavbar { width: 24 0px;
height: 620px;
float: left } #cmain { width: 780px;
height: 62 0px;
float: left;
overflow: auto }
Листинг 11.1
TD, ТН { padding-left: 2px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px }
Листинг 11.2
TD, ТН { border-left-width: thin;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin }
Листинг 11.3
BODY { color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }
...
#cheader { width: 1010рх;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }
#cnavbar { width: 250px;
height: 570px;
float: left;
margin-right: 10px }
#cmain { width: 760px;
height: 570px;
float: left¬over flow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }
#ccopyright { width: 1010рх;
clear: both;
padding: l0px 20px 0px 20px;
border-top: thin dotted #B1BEC6 }
Листинг 11.4
#navbar { font-family: Arial, sans-serif;
font-size: 14pt;
text-transform: uppercase;
list-style-type: none;
margin-left: -30px }
...
#navbar LI { padding: 5px 10рх;
margin: 10рх 0px; border: thin solid #B1BEC6 }
Листинг 11.5
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm">Примеры</A></LI>
<LI><A HREF="about.htm">O разработчиках</А></LI>
</UL>
Листинг 11.6
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm">Примеры</A></LI>
<LI><A HREF="about.htm">O разработчиках</А></LI>
</UL>
Листинг 11.7
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A>
<UL>
<LI><CODE>! DOCTYPE</CODE></LI>
<LI><CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE></LI>
<LI><CODE>BODY</CODE></LI>
<LI><CODE><A HREF="tags/t_video.htm">VIDEO</A></CODE></LI>
</UL>
</LI>
<LI><A HREF="css index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm">Примеры</A></LI>
<LI><A HREF="about.htm">O разработчиках</А></LI>
</UL>
Листинг 11.8
#cnavbar { width: 250рх;
height: 570рх;
float: left;
overflow: auto;
margin-right: 10px }
Листинг 11.9
#navbar LI UL { list-style-type: none;
margin-left: -20px;
margin-top: 10px }
#navbar LI UL LI { font-size: 12pt;
padding: 0px;
margin: 0px;
border-style: none }
Листинг 12.1
TABLE { align: center;
border: medium solid black;
border-spacing: lpx }
TD, TH { border: thin dotted black;
padding: 2px }
Листинг 12.2
<TABLE>
<TR>
<ТН>Первый столбец</ТН>
<ТН STYLE="width: 40рх">Второй столбец шириной в 40 пикселов</ТН>
<ТН>Третий столбец</ТН>
</TR>
...
</TABLE>
Листинг 12.3
<TABLE>
...
<TR>
<TD STYLE="height: 30рх">Строка высотой в 30 пикселов</ТD>
...
</TR>
...
</TABLE>
Листинг 12.4
TABLE { font-size: 10pt;
margin: 10рх 0px; border: thin solid #B1BEC6;
border-collapse: collapse }
...
TD, TH { padding: 2px;
border: thin dotted #B1BEC6
CAPTION { text-align: left }
Листинг 13.1
Н6 + PRE { font-size: smaller }
...
<Н6>Это заголовок</Н6>
<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>
<Р>А этот — обычным шрифтом.</Р>
<Н6>Это заголовок</Нб>
<Р>И этот — обычным шрифтом.</Р>
<PRE>M этот — обычным шрифтом.</PRE>
Листинг 13.2
Н6 + PRE { font-size: smaller }
...
<Н6>Это заголовок</Н6>
<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>
<Р>А этот — обычным шрифтом.</Р>
<Н6>Это заголовок</Н6>
<Р>И этот — обычным шрифтом.</Р>
<PRE>A этот — уменьшенным шрифтом.</PRE>
Листинг 13.3
BLOCKQUOTE + Р { font-style: italic }
<BLOCKQUOTE>
<Р>Этот абзац будет набран курсивом.</Р>
<DIV>
<Р>А этот абзац — обычным шрифтом.</Р>
</BLOCKQUOTE>
Листинг 13.4
BLOCKQUOTE Р { font-style: italic }
<BLOCKQUOTE>
<Р>Этот абзац будет набран курсивом.</Р>
<DIV>
<Р>Этот абзац — тоже.</Р>
</BLOCKQUOTE>
Листинг 13.5
A:link { text-decoration: none }
A:visited { text-decoration: overline }
A:active { text-decoration: underline }
A:focus { text-decoration: underline }
A:hover { text-decoration: underline }
Листинг 13.6
A.special:link { color: darkred }
A.special:visited { color: darkviolet }
A.special:active { color: red }
A.special:focus { color: red }
A.special:hover { color: red }
Листинг 13.7
#cmain P:first-child { font-weight: bold
<DIV ID="cmain">
<Р>Этот абзац будет набран зеленым цветом.</Р>
<BLOCKQUOTE>
<Р>Этот абзац — тоже.</Р>
</BLOCKQUOTE>
<BLOCKQUOTE>
<Р>И этот — тоже.</Р>
<Р>А этот — нет.</Р>
</BLOCKQUOTE>
</DIV>
Листинг 13.8
P:only-of-type { color: green }
<BLOCKQUOTE>
<Р>Этот абзац будет набран зеленым цветом.</Р>
</BLOCKQUOTE>
<BLOCKQUOTE>
<Р>И этот абзац будет набран зеленым цветом.</Р>
<ADDRESS>A этот текст — нет.</ADDRESS>
</BLOCKQUOTE>
<BLOCKQUOTE>
<Р>И этот — нет.</Р>
<Р>И этот — нет.</Р>
</BLOCKQUOTE>
Листинг 13.9
A:link { color: #576C8C;
text-decoration: none }
A:visited { color: #A1AFBA;
text-decoration: none }
A:focus, A:hover,
A:active { color: #576C8C;
text-decoration: underline }
Листинг 13.10
#navbar A:link,
#navbar A:visited { color: #576C8C;
text-decoration: none }
#navbar A:focus,
#navbar A:hover,
#navbar A:active { color: #576C8C;
text-decoration: underline }
Листинг 14.1
<SCRIPT>
var dNow = new Date();
var sNow = dNow. toString () ;
document.write(sNow);
</SCRIPT>
Листинг 14.2
<SCRIPT>
var dNow = new Date();
var sNow = dNow.getDate() + "." + dNow.getMonth() + "." +
dNow.getFullYear();
document.write(sNow);
</SCRIPT>
Листинг 14.3
#navbar LI { padding: 5px 10рх;
margin: 10рх 0рх;
border: thin solid #B1BEC6;
cursor: pointer }
Листинг 14.4
Ext.onReady(function() {
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", functionfe, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function (e, t) {
Ext.get(this).removeClass("hovered");
});
});
Листинг 14.5
<SCRIPT>
var dNow — new Date();
var sNow = dNow.getDate() + "." + dNow.getMonth() + "." +
dNow.getFullYear();
document.write(sNow);
</SCRIPT>
Листинг 14.6
var a, b, с, d, e, f;
а = 11;
L = "12";
с = а + b;
d = "JavaScript";
е = 2;
f = d + е;
Листинг 14.7
if (<условие>)
<блок "то">
else
<блок "иначе">
Листинг 14.8
if (X == 1) {
а = "Единица";
L = 1;
}
else {
а = "Не единица";
b = 22222;
}
Листинг 14.9
if ( (х == 1) && (у > 10))
f = 3;
else
f = 33;
Листинг 14.10
switch (<исходное выражение>) {
case Оначение 1> :
<блок 1>[break;][case Оначение 2> :
<6лок 2>[break; ]]
<... другие секции case>
[default :
<6лок, исполняемый для осталmных значений>]
}
Листинг 14.11
switch (a) {
case 1 :
out = "Единица";
break;
case 2 :
out = "Двойка";
break;
case 3 :
out = "Тройка";
break;
default :
out = "Другое число";
}
Листинг 14.12
<имя свойства 1>: <значение свойства 1>,
<имя свойства 2>: Оначение свойства 2>,
<имя свойства n-1>: Оначение свойства n-1>;
<имя свойства п>: <значение свойства п>
<имя метода 1>: <функция, реализующая метод 1>,
<имя метода 2>: <функция, реализующая метод 2>,
<имя метода n-1>: <функция, реализующая метод n-1>,
<имя метода n>: <функция, реализующая метод n>
}
Листинг 15.1
<Экземпляр объекта Element>.is(<селектор CSS>)
var elCMain = Ext.get("cmain");
if (elCMain.is("P"))
var s = "Это абзац." else
var s = "Это не абзац. Тьфу на него!";
Листинг 15.2
var oConf = { tag: "P",
html: "Привет от Web-сценария!",
els: "someclass",
id: "newparagraph"
}
Ext.DomHelper.append("cmain", oConf);
Листинг 15.3
var oConf2 = { tag: "UL",
children: [
{ tag: "LI", html: "Первый пункт" },
{ tag: "LI", html: "Второй пункт" },
{ tag: "LI", html: "Третий пункт" }
]
};
Ext.DomHelper.append("cmain", oConf2);
Листинг 15.4
<экземпляр объекта Еlement>.replaceWith(<конфигуратор>)
var oConf5 = { tag: "DIV",
html: "<Р>Новый контейнер с новым содержимым.</Р>",
id: "cmain"
}
Ext.get("cmain").replaceWith(oConf5);
Листинг 15.5
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});
Листинг 15.6
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(t).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(t).removeClass("hovered");
});
Листинг 15.7
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
e.stopEvent();
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
e.stopEvent();
});
Листинг 15.8
clContainers.each(function(el, cl, ind)
{
el.addClass("hovered");
}
);
Листинг 15.9
clContainers.each(function(el, cl, ind)
{
this.addClass("hovered");
}
);
Еще проще написать так:
clContainers.addClass("hovered");
}
);
Листинг 16.1
BODY { color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px; overflow: hidden }
Листинг 16.2
function adjustContainers() {
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
var cNavbarWidth = Ext.get("cnavbar") .getWidth();
var cHeaderHeight = Ext.get("cheader").getHeight();
var cCopyrightHeight = Ext.get("ccopyright") .getHeight();
Ext.get("cheader").setwidth(clientWidth);
var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -
30;
Ext.get("cnavbar").setHeight(cNavbarHeight);
Ext.get("cmain").setHeight(cNavbarHeight);
Ext.get("cmain").setwidth(clientWidth - cNavbarWidth - 10);
Ext.get("ccopyright").setwidth(clientWidth);
}
Листинг 16.3
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});
Листинг 16.4
#navbar A:focus,
#navbar A:hover,
#navbar A:active,
#navbar A:visited { color: #576C8C;
text-decoration: none }
Листинг 16.5
ceLinks.on("click", function(e, t) {
var elA = Ext.get(this).child("A");
if (elA) {
var href = elA.getAttribute("HREF");
e.stopEvent();
window.location.href = href;
}
});
Листинг 16.6
function showInnerList(ilndex) {
var elNavbar = Ext.get("navbar");
var celnnerLists = elNavbar.select("UL");
celnnerLists.setDisplayed(false);
if (ilndex) {
var sSelector = "UL:nth(" + ilndex + ")";
elNavbar.child(sSelector).setDisplayed(true);
}
}
Листинг 16.7
. selected,
#navbar .selected A:link,
#navbar .selected A:focus,
#navbar .selected A:hover,
#navbar .selected A:active,
#navbar .selected A:visited { color: #F8F8F8;
background-color: #57 6C8C }
Листинг 16.8
function selectltem(ilndex, sText) {
var elNavbar = Ext.get("navbar");
elNavbar.select("LI").removeClass("selected");
var celnnerLists = elNavbar.select("UL");
celnnerLists.setDisplayed(false);
var sSelector = "> LI:nth(" + ilndex + ")";
var elOuTeгltem = elNavbar.child(sSelector);
var ellnnerList = elOuTeгltem.child("UL");
if (ellnnerList) {
ellnnerList.setDisplayed(true);
if (sText) {
sSelector = "LI:has(:nodeValue(" + sText + "))";
elOuTeгltem.child(sSelector).addClass("selected");
}
} else
elOuTeгltem.addClass("selected");
}
Листинг 16.9
function showHideSample(e, t) {
var elDiv = Ext.fly(t).parent(".sample");
var ceSampleText = elDiv.select("*:not(:first-child)");
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);
ceSampleText.toggle();
}
function prepareSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.on("click", showHideSample);
elH6.on("mouseover", function (e, t) {
Ext.get(this).parent("DIV").addClass("hovered");
});
elH6.on("mouseout", function (e, t) {
Ext.get(this).parent("DIV").removeClass("hovered");
});
var ceSampleText = el.select("*:not (:first-child)");
ceSampleText.setDisplayed(false);
});
}
Листинг 16.10
<DIV CLASS="sample">
<Н6>Пример:</Н6>
<PRE><AUDIO SRC="sound.wav"
CONTROLS></AUDIO></PRE>
<Н6>РезулLтат:</Н6>
<AUDIO SRC="sound.wav" CONTROLSx/AUDIO»
</DIV>
Листинг 17.1
function loadFragment(elLI, e) {
if (e)
е.stopEvent();
var elA = elLl.child("A");
if (elA) {
cleanupSamples();
var href = elA.getAttribute("HREF") ;
Ext.get("cmain").load({ url: href, success: prepareSamples });
if (elLI.parent("UL").id == "navbar") {
var ellnnerList = elLI.child("UL");
if (ellnnerList) {
if (eiLastitem) {
eiLastitem.removeClass("selected");
eiLastitem = null;
}
if ((eiLastinnerList) && (eiLastinnerList.dom !=
ellnnerList.dom))
eiLastinnerList.setDisplayed(false);
ellnnerList.setDisplayed(true);
eiLastinnerList = ellnnerList;
} else {
if (eiLastinnerList) {
eiLastinnerList.setDisplayed(false);
eiLastinnerList = null;
}
if ((eiLastitem) && (eiLastitem.dom != elLI.dom))
eiLastitem.removeClass("selected");
elLI.addClass("selected");
eiLastitem = elLI;
}
} else {
if ((elLastltem) && (elLastltem.dom != elLI.dom))
elLastltem.removeClass("selected");
elLI.addClass("selected");
elLastltem = elLI;
}
}
}
Листинг 17.2
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6. removeAHListeners();
});
}
Листинг 18.1
var aHTML = []
aHTML[0] = name: "!DOCTYPE", url: "tags/t_doctype.htm" };
aHTML[1] = name: "AUDIO", url: "tags/t_audio.htm" };
aHTML[2] = name: "BODY", url: "tags/t_body.htm" };
aHTML[3] = name: "EM", url: "tags/t_em.htm" };
aHTML[4] = name: "HEAD", url: "tags/t_head.htm" };
aHTML[5] = name: "HTML", url: "tags/t_html.htm" };
aHTML[6] = name: "IMG", url: "tags/t_img.htm" };
aHTML[7] = name: "META", url: "tags/t_meta.htm" };
aHTML[8] = name: "P", url: "tags/t_p.htm" };
aHTML[9] = name: "STRONG", url: "tags/t_strong.htm" };
aHTML[10] = name: "TITLE", url: "tags/t_title.htm" };
aHTML[11] = name: "VIDEO", url: "tags/t_video.htm" };
var aCSS = [] ;
aCSS[0] = { name: "border", url: "attrs/a_border.htm" };
aCSS[l] = { name: "color", url: "attrs/a_color.htm" };
aCSS[2] = { name: "margin", url: "attrs/a margin.htm" };
var aSamples = [] ;
aSamples[0] = { name: "Гиперссылки", url: "samples/a_hyperlinks.htm" };
aSamples[1] = { name: "Контейнеры", url: "samples/a_containers.htm" };
aSamples[2] = { name: "Таблицы", url: "samples/a_tables.htm" };
Листинг 18.2
<UL ID="navbar">
<LI><A HREF="chapTeгs/html. htm">HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapTeгs/css .htm">CSS</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapTeгs/samples.htm">Примеры</А>
<UL>
</UL>
</LI>
<LI><A HREF="chapTeгs/about.htm">0 разработчиках</А></LI>
</UL>
Листинг 18.3
function generatelnnerList(aDataBase, ellrmerList) {
for (var i = 0; i < aDataBase.length; i++) {
var s = "<LI><CODE><A HREF=\"" + aDataBase
.url + "\">" +
aDataBase .name + "</A></CODE></LI>";
ellnnerList.insertHtml("beforeEnd", s);
Листинг 18.4
function sortArray(cl, c2) {
if (cl.name < c2.name)
return -1
else
if (cl.name > c2.name)
return 1
else
return 0;
}
Листинг 19.1
function generateinnerList(aDataBase, ellnnerList) {
for (var i = 0; i < aDataBase.length; i++) {
var s = "<LIXCODE><A HREF=\"" + aDataBase .url + "\">" +
aDataBase.name +
"</A></CODE></LI>" ;
var htelltem = ellnnerList.insertHtml("beforeEnd", s);
htelltem.related = aDataBase.related;
}
}
Листинг 19.2
function generaTeгelated() {
var s = "";
var oRelated = elLastltem.dom.related;
if (oRelated) {
for (var i = 0; i < oRelated.length; i++) {
if (s != "")
s += ", ";
s += "<CODE><A HREF=\"" + oRelated .url + "\">" +
oRelated .name + "</A></C0DE>";
}
var htelRelated = Ext.get("cmain").insertHtml("beforeEnd",
"<Р>См. также: " + s + "</P>");
Ext.fly(htelRelated).select("A").on("click", functionfe, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elltem = elA.parent("LI");
loadFragment(elltem, e) ;
});
}
}
Листинг 19.3
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6. removeAllListeners();
});
var ceA = Ext.get("cmain").select("A"!);
ceA. removeAUListeners();
}
Листинг 19.4
} else {
if ((elLastltem) && (elLastltem.dom !=elLI.dom))
elLastltem.removeClass("selected");
elLI.addClass("selected");
elLastltem = elLI;
}
Листинг 19.5
else {
var ellnnerList = elLI.parent("UL");
if ( (elLastlnnerList) && (elLastlnnerList.dom != ellnnerList.dom))
elLastlnnerList.setDisplayed(false);
ellnnerList.setDisplayed(true);
elLastlnnerList = ellnnerList;
if ((elLastltem) && (elLastltem.dom != elLI.dom))
elLastltem.removeClass("selected");
elLL.addClass("selected");
elLastltem = elLI;
}
Листинг 20.1
<FORM ACTION="#">
<Р>Имя: <INPUT TYPE="text" ID="namel" NAME="namel" SIZE="20"
AUTOFOCUS></P>
<Р>Фамилия: <INPUT TYPE="text" ID="name2" NAME="name2" SIZE="30"x/P>
</FORM>
Листинг 20.2
<FORM ACTION="#">
<Р>Имя: <INPUT TYPE="text" ID="login" NAME="login" SIZE="20"
AUTOFOCUS></P>
<Р>Пароль: <INPUT TYPE="password" ID="password" NAME="password"
SIZE="20"ЮБ/P>
</FORM>
Листинг 20.3
<FORM ACTION="#">
<Р>Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"ЮБ/P>
</FORM>
Листинг 20.4
<FORM ACTION="#">
<Р>
Введите сюда ваш отзыв о Web-сайте:<BR>
<TEXTAREA ID="opinion" NAME="opinion" COLS="60" ROWS="10">
Отличный Web-сайт! </TEXTAREA>
</FORM>
Листинг 20.5
<FORM ACTION="#">
<Р>
Найти:
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" УАШЕ="ИскатL!">
</P>
</FORM>
Листинг 20.6
<FORM ACTION="#"> <Р>
<INPUT TYPE="checkbox" ID="updates" NAME="updates" CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</FORM>
Листинг 20.7
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates">
Я не хочу получать письма со списком обновлений Web-сайта
</P>
</FORM>
Листинг 20.8
<FORM ACTION="#">
<Р>
ВыполнятL поиск по
<SELECT ID="search_in" NAME="search_in">
<ОРТION>названиям</ОРТION>
<OPTION>ключевым словам</ОРТION>
<OPTION SELECTED>названиям и ключевым словам</OPTION>
</SELECT>
</P>
</FORM>
Листинг 20.9
<FORM ACTION="#">
<P>
Выполнять поиск по
<SELECT ID="search_in" NAME="search_in">
<OPTGROUP LАВЕL="Быстрый поиск">
<OPTION>названиям</OPTION>
<ОРТION>ключевым словам</OPTION>
</OPTGROUP>
<OPTION ЗЕLЕСТЕD>названиям и ключевым словам</ОРТION>
</SELECT>
</P>
</FORM>
Листинг 20.10
<FORM ACTION="#">
<P><LABEL FOR="keyword">Найти:</LABEL>
<INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></P>
</FORM>
Листинг 20.11
<FORM ACTION="#">
<Р><LАВЕL>Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="4O"></LABEL></P>
</F0RM>
Листинг 20.12
<FORM ACTION="#">
<FIELDSET>
<LEGEND>Найти:</LEGEND>
<P>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!">
</P>
</FIELDSET>
</FORM>
Листинг 20.13
:disabled { color: #B1BEC6 }
:checked { font-weight: bold }
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</Р>
<Р>
<INPUT TYPE="radio" ID="updates_no" NAME="updates" CHECKED >
Я не хочу получать письма со списком обновлений Web-сайта
</Р>
<Р>Почтовый адрес: <INPUT TYPE="text" ID="email" NAME="email"
DISABLED></P>
</FORM>
Листинг 20.14
<FORM ACTION="#">
<Р>
<INPUT TYPE="checkbox" ID="updates" NAME="updates">
Я хочу получать письма со списком обновлений Web-сайта
</Р>
<Р>Почтовый адрес: <INPUT TYPE="text" ID="email" NAME="email"></P>
</FORM>
Ext.getDom("email").disabled = false;
Листинг 20.15
<FORM ACTION="#">
<Р>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</Р>
<Р>
<INPUT TYPE="radio" ID="updates_no" NAME="updates">
Я не хочу получать письма со списком обновлений Web-сайта
</Р>
<Р>Почтовый адрес: <INPUT TYPE="text" ID="email" NAME="email"></P>
</FORM>
Ext.get("updates_yes").on ("click", function () {
var htelEmail = Ext.getDom("email");
htelEmail.disabled = this.checked;
});
Листинг 20.16
<FORM ACTION="#">
<Р>
Выполнять поиск по
<SELECT ID="search_in" NAME="search_in">
<OPTION>названиям</OPTION>
<OPTION>ключевым словам</OPTION>
<OPTION SЕLЕСТЕD>названиям и ключевым словам</OPTION>
</SELECT>
</Р>
</FORM>
var ilndex = Ext.getDom("search_in").selectedlndex;
if (ilndex == -1) {
//если в списке не выбран ни один пункт, делаем одно
} else {
//если в списке выбран какой-либо пункт, делаем другое
}
Листинг 20.17
<FORM ACTION="#">
С помощью каких тегов HTML формируется таблица?
<SELECT ID="answer" NAME="answer" SIZE="5" MULTIPLE>
<OPTION>TR</OPTION>
<OPTION>DIV</OPTION>
<OPTION>TABLE</OPTION>
<OPTION>TH</OPTION>
<OPTION>TT</OPTION>
<OPTION>HEAD</OPTION>
<OPTION>TD</OPTION>
</SELECT>
</Р>
</FORM>
var clltems = Ext.getDom("answer").options;
if ((clltems[0].selected) && (clltems[2].selected)
&& (clltems[3].selected) && (clltems[6].selected)) {
var s = "Вы ответили правильно!";
} else {
var s = "Неправильно! Будьте внимательнее.";
}
Листинг 20.18
<FORM ACTION="#">
<Р>
Найти:
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!">
</Р>
</FORM>
Ext.getDom("find").click();
Листинг 20.19
<FORM ACTION="#">
<Р>
Поиск:<BR>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="20">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!" ><BR>
<SELECT ID="search_in" NAME="search_in">
<OPTION>B названиях</OPTION>
<OPTION>B ключевых словах</OPTION>
«OPTION SELECTED>B названиях и ключевых словах</OPTION>
</SELECT>
</Р>
</FORM>
Листинг 20.20
function searchData() {
var sKeyword = Ext.get("keyword").getValue(false);
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedlndex;
var aResult = [];
searchlnArray(sKeyword, aHTML, aResult, iSearchMode);
searchlnArray(sKeyword, aCSS, aResult, iSearchMode);
searchlnArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult .url + "\">" +
aResult .name + "</A></LI>";
}
var htelResult = Ext.get("cmain").insertHtml("beforeEnd",
"<Р>Результаты поиска :</PXUL>" + s + "</UL>") ;
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elltem = elA.parent("LI");
loadFragment(elltem, e);
{);
}
}
}
Листинг 20.21
function searchinArray(sKeyword, aDataArray, aResultArray, iSearchMode) {
var sN, sK;
var sKw = "," + sKeyword.toLowerCase();
for(var i = 0; i < aDataArray.length; i++) {
sN = "," + aDataArray.name.toLowerCase();
if (aDataArray.keyword)
sK = "," + aDataArray.keyword.toLowerCase()
else
sK = "";
if (((iSearchMode ==0) || (iSearchMode == 2)) &&
(sN.indexOf(sKw) !=-!))
aResultArray[aResultArray.length] = aDataArray
else
if (((iSearchMode ==1) II (iSearchMode == 2)) &&
(sK.indexOf(sKw) != -1))
aResultArray[aResultArray.length] = aDataArray;
}
}
Листинг 21.1
#search { position: absolute;
left: 200px;
top: 100px;
width: 300рх;
height: 200px }
Листинг 21.2
#search { position: absolute;
left: 200px;
top: 100px;
width: 300рх;
height: 200рх;
z-index: 2 }
#main { position: absolute;
left: 100рх;
top: 0px;
width: 600px;
height: 500px;
z-index: 0 }
Листинг 21.3
#search { position: absolute;
left: 200px;
top: 100px;
width: 300px;
height: 200px;
z-index: 2;
clip: rect(100px, 200px, 200px, 0px) }
Листинг 21.4
<DIV ID="csearch">
<FORM ACTION="#">
<P>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="20">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!"><BR>
<SELECT ID="search_in" NAME="search_in">
<OPTION>B названиях</OPTION> <OPTION>B ключевых словах</0РТ1СЖ>
<OPTION SELECTED>B названиях и ключевых словах</OPTION>
</SELECT>
<UL ID="search_result">
</UL>
</FORM>
</DIV>
Листинг 21.5
#csearch { background-color: #F8F8F8;
position: absolute;
left: 600px;
top: 0px;
padding: 2px;
border: thin solid #B1BEC6 }
Листинг 21.6
function searchData() {
var elSearchResult = Ext.get("search_result");
elSearchResult. select ("A") . removeAHListeners () ;
elSearchResult.dom.innerHTML = "";
elSearchResult.setDisplayed(false);
var sKeyword = Ext.get("keyword").getValue(false);
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedlndex;
var aResult = [];
searchlnArray(sKeyword, aHTML, aResult, iSearchMode);
searchlnArray(sKeyword, aCSS, aResult, iSearchMode);
searchlnArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult .url + "\">" +
aResult.name + "</A></LI>";
}
var htelResult = elSearchResult.insertHtml("beforeEnd", s);
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elltem = elA.parent("LI");
loadFragment(elltem, e);
});
elSearchResult.setDisplayed(true);
}
}
}
Листинг 21.7
var sKeyword = Ext.get("keyword").getValue(false);
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search in").selectedlndex;
var aResult = [];
searchlnArray(sKeyword, aHTML, aResult, iSearchMode);
searchlnArray(sKeyword, aCSS, aResult, iSearchMode);
searchlnArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult .url + "\">" +
aResult .name + "</A></LI>";
}
var htelResult = elSearchResult.insertHtml("beforeEnd", s);
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elltem = elA.parent("LI");
loadFragment(elltem, e);
});
Листинг 21.8
function deanupSampies () {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind)(
var elH6 = el.child(":first");
elH6.removeAHListeners();
});
}
Листинг 22.1
ctxCanvas.strokeStyle = "rgba(255, 0, 0, 1)";
ctxCanvas.fillStyle = "rgba (255, 0, 0, 1)";
ctxCanvas.fillRect(0, 100, 400, 100);
ctxCanvas.strokeStyle = "rgba(O, 255, 0, 0.5)";
ctxCanvas.fillStyle = "rgba(0, 255, 0, 0.5)";
ctxCanvas.fillRect(100, 0, 200, 300);
Листинг 22.2
ctxCanvas.beginPath();
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Листинг 22.3
ctxCanvas.beginPath();
ctxCanvas.strokeStyle = "red";
ctxCanvas.fillStyle = "red";
ctxCanvas.moveTo(100, 100);
ctxCanvas.quadraticCurveTo(200, 100, 200, 200);
ctxCanvas.lineTo(100, 200);
ctxCanvas.lineTo(100, 100);
ctxCanvas.fill();
Листинг 22.4
ctxCanvas.beginPath() ;
ctxCanvas.moveTo(20, 0) ;
ctxCanvas.lineTo(180, 0) ;
ctxCanvas.quadraticCurveTo(200, 0, 200, 20);
ctxCanvas.lineTo(200, 80);
ctxCanvas.quadraticCurveTo(200, 100, 180, 100);
ctxCanvas.lineTo(20, 100);
ctxCanvas.quadraticCurveTo(0, 100, 0, 80);
ctxCanvas.lineTo(0, 20);
ctxCanvas.quadraticCurveTo(0, 0, 20, 0) ;
ctxCanvas.stroke();
Листинг 22.5
ctxCanvas.beginPath();
ctxCanvas.rect(50, 50, 50, 50);
ctxCanvas.rect(75, 75, 50, 50);
ctxCanvas.rect(100, 100, 50, 50);
ctxCanvas.fill();
Листинг 22.6
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineCap = "round";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(180, 20);
ctxCanvas.stroke();
Листинг 22.7
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineJoin = "bevel";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Листинг 22.8
ctxCanvas.beginPath();
ctxCanvas.lineJoin = "miTeг";
ctxCanvas.lineWidth = 10;
ctxCanvas.miTeгLimit = 1;
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Листинг 22.9
var lgSample = ctxCanvas.createLinearGradient(0, 0, 100, 50);
lgSample.addColorStop(0, "black");
lgSample.addColorStop(0.4, "rgba(0, 0, 255, 0.5)");
lgSample.addColorStop(1, "#FF0000");
ctxCanvas.fillStyle = lgSample;
ctxCanvas.fillRect(0, 0, 200, 100);
Листинг 22.10 !
var rgSample = ctxCanvas.creaTeгadialGradient(100, 100, 10, 150, 100,
120);
rgSample.addColorStop(0, "#CCCCCC");
rgSample.addColorStop(0.8, "black");
rgSample.addColorStop(1, "#00FF00");
ctxCanvas.fillStyle = rgSample;
ctxCanvas.fillRect(0, 0, 2 00, 200);
Листинг 22.11
var imgSample = new Image(); function imgOnLoad() {
ctxCanvas.drawlmage(imgSample, 20, 40, 40, 20, 0, 0, 400, 300);
}
imgSample.src = "someimage.jpg";
imgSample.onload = imgOnLoad;
Листинг 22.12
ctxCanvas.save();
ctxCanvas.translate(100, 100);
ctxCanvas.fillRect(0, 0, 50, 50);
ctxCanvas.translate(100, 100);
ctxCanvas.fillRect(0, 0, 50, 50);
ctxCanvas.restore() ;
ctxCanvas.fillRect(0, 0, 50, 50);
Листинг 22.13
ctxCanvas.translate(200, 150);
for (var i = 0; i < 3; i++) {
ctxCanvas.rotate(Math.PI / 6);
ctxCanvas.strokeRect(-50, -50, 100, 100);
Листинг 22.14
ctxCanvas.save();
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.scale(3, 1);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
ctxCanvas.save();
ctxCanvas.scale(1, 3) ;
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore() ;
ctxCanvas.save();
ctxCanvas.scale(3, 3);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
Листинг 22.15
ctxCanvas.fillStyle = "blue";
ctxCanvas.fillRect(0, 50, 400, 200);
ctxCanvas.fillStyle = "red";
ctxCanvas.globalCompositeOperation = "source-over";
ctxCanvas.fillRect(100, 0, 200, 300);
Листинг 22.16
ctxCanvas.beginPath() ;
ctxCanvas.moveTo(100, 150);
ctxCanvas.lineTo(200, 0) ;
ctxCanvas.lineTo(200, 300);
ctxCanvas.closePath();
ctxCanvas.clip();
ctxCanvas.fillRect(0, 100, 400, 100);
Листинг 22.17
function drawHeader() {
var elCanvas = Ext.get("cnv");
var cnvWidth = elCanvas.getAttribute("width");
var ctx = elCanvas.dom.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke () ;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
ctx.font = "normal 2Opt Arial";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillStyle = "#3B4043";
ctx.scale(2, 1.3);
ctx.fillText("Справочник по HTML и CSS", cnvWidth / 2, 60 / 1.3,
cnvWidth 12);
}
Листинг П1
#cheader { width: 1010px;
padding: 0 20px;
border-bottom:
medium dotted;
-moz-border-radius-bottomleft: 2px
; -moz-border-radius-bottomright: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px }
Листинг П2
#navbar LI { padding: 5px 10рх;
margin: 10рх 0px;
border: thin solid #B1BEC6;
-moz-border-radius: 3px/lpx 3рх/lpx 0px 0px;
border-radius: 3рх/lpx 3рх/lpx 0px 0px;
-webkit-border-radius: 3рх/lpx 3рх/lpx 0px 0px;
cursor: pointer }
Листинг ПЗ
DFN { outline: thin dotted #B1BEC6;
-moz-outline-radius-topleft: 3рх;
-moz-outline-radius-topright: 3рх;
-moz-outline-radius-bottomright: 3рх;
-moz-outline-radius-bottomleft: 3рх }
Листинг П4
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300рх;
-webkit-column-width: 300рх }
Листинг П5
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300рх;
-webkit-column-width: 300рх;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm }
Листинг П6
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300рх;
-webkit-column-width: 300рх;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin }
Листинг П7
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300рх;
-webkit-column-width: 300рх;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin;
-moz-column-rule-style: dotted;
-webkit-column-rule-style: dotted }
Листинг П8
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300рх;
-webkit-column-width: 300рх;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin;
-moz-column-rule-style: dotted;
-webkit-column-rule-style: dotted;
-moz-column-rule-color: #B1BEC6;
-webkit-column-rule-color: #B1BEC6 }
Листинг П9
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300рх;
-webkit-column-width: 300рх;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule: thin dotted #B1BEC6;
-webkit-column-rule: thin dotted #B1BEC6 }
ЛистингП10
#cheader { -moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform-origin: left;
-o-transform-origin: left;
-webkit-transform-origin: left }
ЛистингП11
#cheader { -moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
-webkit-transform-origin: right bottom
но к Специалисту нужно прицепить какой-нибудь хороший учебник типа 100+1 совет или что-нибудь в таком роде. тут ссылка есть еще, отличная книга, знаю ее. из той же серии, орейли. короче где практика идет
