Лекция Курс лекций по Информатике 2
Работа добавлена на сайт bukvasha.net: 2015-10-29Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
от 25%
Подписываем
договор
1. ПОСТРОЕНИЕ
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
<SCRIPT language=JavaScript src="imageslide.js"></SCRIPT> или <SCRIPT language=JavaScript>……..</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
2. Выделение текста - физические и логические стили.
Физические стили.(единые)
<B> - жирный шрифт;
<I> - курсив;
<TT> - шрифт фиксированной ширины (как на пишущей машинке);
<U> - подчеркнутый текст;
<STRIKE> - перечеркнутый шрифт;
<S> - тоже перечеркнутый шрифт;
<BIG> - шрифт большего размера;
<SMALL> - шрифт меньшего размера.
Логические стили.(каждый браузер по-разному)
<DFN> - служит для описания определений (это определение);
<EM> - служит для выделения текста (это выделенное слово);
<CITE> - служит для выделения цитат (это цитата);
<CODE> - служит для выделения программных кодов. Обычно выделяется шрифтом фиксированной ширины (это текст программы);
<KBD> - используется для ввода с клавиатуры пользователя (Введите password );
<SAMP> - используется для вывода машинных сообщений (Segmentation fault: core dumped);
<STRONG> - служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст);
<VAR> - используется для символьных переменных (это переменная);
<ABBR> - используется для аббревиатур (СНГ, КПСС, WWW);
<ACRONYM> - используется для сокращений (стр., англ.).
3. Форматирование текста.
Отличаются заголовки от текста и между собой толщиной и высотой букв, в заголовке <H1> самые крупные символы. Тэги <H1>..</H1>, <H2>..</H2>, ... , <H6>..</H6>.
<P>Абзатц. При просмотре браузером абзацы отделяются друг от друга пустой строкой.
<P>Этот абзац расположен слева<P>
<P ALIGN=CENTER>Этот абзац по центру</P>
<P ALIGN=RIGHT>А вот этот абзац справа</P>
Аналогично форматируются и заголовки: <H1 ALIGN=RIGHT>..</H1> и т.д.
<CENTER>..<CENTER>
<BR>пропуск строки
<HR> описывает горизонтальную линию. Может включать аттрибуты:
SIZE - толщина линии в пикселах;
WIDTH - длина линии в пикселах или процентах от ширины экрана;
ALIGN - выравнивание линии, может принимать значения LEFT, CENTER, RIGHT;
COLOR - цвет линии;
NOSHADE - линия рисуется без тени.
Пример использования тэгов <BR> и <HR>:
----------------------------------------------------------------------------------------------
Метки <BLOCKQUOTE></BLOCKQUOTE> добавляют к выделенному ими тексту со всех четырех сторон поля (сверху и снизу - по пустой строке, слева и справа - шириной в 5 знаков). Пример - этот абзац.
Еще один способ форматирования текста - использование меток <PRE>..</PRE> (prefomatted text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Однако с использованием тега <PRE> текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.
Пример. В тексте:
<PRE>
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг <BR>!
</PRE>
В окне браузера:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг <BR>!
Урок 4
Тема: ссылки.
Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:
<A HREF="путь/имя файла">Ссылка на документ</A>
Может содержать аттрибут TITLE, описывающий ссылку. Если пользователь наведет указатель мыши на ссылку, то появится ее описание - содержимое этого аттрибута.
Различают относительные и абсолютные ссылки. Примеры относительной ссылки:
<A HREF="filename.htm"> - на документ "filename.htm", находящийся в одном каталоге с текущим документом;
<A HREF="./filename.htm"> - в точности то же самое;
<A HREF="folder/filename.htm"> - переход на файл "filename.htm" в подкаталоге "folder" текущего каталога;
<A HREF="../folder/filename.htm"> - подняться вверх на один шаг по дереву каталогов, перейти в каталог "folder" и осуществить переход на "filename.htm".
В абсолютной ссылке указывается полный путь к файлу:
<A HREF="http://www.fortunecity.com/business/fax/339/index.htm">
Относительные ссылки удобнее. Они не привязаны к конкретной структуре каталогов, т.е. вы можете создать свой сайт на компьютере, тестировать и исправлять ошибки не подключаясь к Интернет. И лишь после полной готовности перенести его на сервер, он будет работать так же.
Можно делать ссылки внутри документа. Это удобно для перехода к разным главам одной большой статьи. Для этого необходимо создать некую опорную точку - анкер (anchor - якорь,англ.), на которую и будет происходить переход. Разберем это на примере. Допустим, нам надо перейти на начало этого урока. Для чего создадим такой анкер:
<A NAME=lesson4>Ссылки</A>
При этом слово "Ссылки" в тексте никак выделяться не будет. Теперь в тексте можем делать ссылку на анкер (и не один раз). Например, так:
Нажмите <A HREF="#lesson4">здесь</A> для возврата к началу урока
И получите:
Нажмите здесь для возврата к началу урока
Можете нажать - пример работает! К этому анкеру можно перейти и из другого файла (например, чтобы сделать ссылку к конкретному уроку 4, а не урокам HTML вообще). Тогда ссылка будет выглядеть так:
<A HREF="uroki.htm#lesson4">
До сих пор мы рассматривали ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://servername/directory/file.ext">
Такая ссылка запустит протокол передачи файлов и произведет выгрузку файла "file.ext" из директории "directory" сервера "servername" на жесткий диск пользователя (download).
Еще один вид ссылки - ссылка на почтовый ящик. Выглядит в тексте:
Пишите письма <A HREF="mailto:[email protected]">автору</A>
В окне браузера:
Пишите письма автору
А это то же самое (ссылка на почтовый ящик), но с использованием аттрибута TITLE. В тексте:
Пишите письма <A HREF="mailto:[email protected]" TITLE="Ссылка на почтовый ящик Администратора сайта">автору</A>
В окне браузера:
Пишите письма автору
Попробуйте навести курсор на "автора".
Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же - нерабочая ссылка.
Тема: рисунки.
В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями .gif) и JPEG (файлы с расширениями .jpg и .jpeg) и строчка HTML-тексте, указывающая браузеру, где этот рисунок находится:
<IMG SRC="picture.gif"> - рисунок "picture.gif" находится в том же каталоге, что и текущий документ;
<IMG SRC="images/picture.gif"> - перейти в подкаталог "images" текущего каталога и взять файл оттуда;
<IMG SRC="../images/picture.gif"> - подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;
<IMG SRC="http://www.fortunecity.com/business/fax/339/artics/practic/myphoto.gif"> - указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.
У данного тэга могут быть следующие аттрибуты:
ALT="какой-то текст" - альтернативный текст. Текст, который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений (отключают многие - для экономии времени на медленных линиях связи).
BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0" рамка не рисуется.
WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).
HEIGHT="n" - высота изображения в пикселах или в процентах от высоты экрана.
HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным).
VSPACE="n" - вертикальный отступ от картинки в пикселах.
ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя аттрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка ( CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение аттрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.
Значения n перечисленных выше аттрибутов по умолчанию равны нулю.
Рисунок может быть ссылкой. Для этого <IMG SRC="..."> разместите между тэгами <A HREF="..."> и </A>. Вокруг рисунка появится рамка, показывающая, что он является ссылкой. Если рамка портит внешний вид документа, то укажите в аттрибутах рисунка BORDER="0".
Урок 6
Тема: цвет фона и текста, шрифты.
Цвет фона определяется значением аттрибута BGCOLOR - шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета, вторая - для зеленого, и третья пара - для синего цвета. #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA и т.п - одно из шестнадцати допустимых значений.
BLACK #000000 GREEN #008000
SILVER #C0C0C0 LIME #00FF00
GRAY #808080 OLIVE #808000
WHITE #FFFFFF YELLOW #FFFF00
MAROON #800000 NAVY #000080
RED #FF0000 BLUE #0000FF
PURPLE #800080 TEAL #008080
FUCHSIA #FF00FF AQUA #00FFFF
Например, чтобы сделать цвет фона страницы фиолетовым, можно написать
<BODY BGCOLOR="#FF00FF">, а можно и так:
<BODY BGCOLOR="PURPLE">.
Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их "знают". Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).
Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут BACKGROUND с указанием пути к рисунку. Например
<BODY BACKGROUND="graph/picture.gif">
Аттрибуты BGCOLOR и BACKGROUND могут находиться внутри метки <BODY>, тогда цвет фона устанавливается для всей страницы, либо в метках <TABLE>, <TR> и <TD> - устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответсвенно (таблицы - тема следующего урока).
Для изменения цвета и размера шрифта используется метка <FONT></FONT>. Ее аттрибуты:
COLOR="#hhhhhh" - цвет текста;
SIZE="n" - размер шрифта;
FACE="имя_шрифта" - смена шрифта, где имя_шрифта может быть arial, verdana, helvetica, sans-serif и другие.
Пример использования метки <FONT>:
<FONT SIZE="5" COLOR="RED" FACE="SANS-SERIF">Крупный шрифт красного цвета без засечек</FONT>
В окне браузера увидите Крупный шрифт красного цвета без засечек
Для размещения текста в верхнем или нижнем регистре используются соответственно метки <SUP>..</SUP> (superscript) и <SUB>..</SUB> (subscript). Пример их использования:
в тексте: в окне браузера:
E=mc<SUP>2</SUP> E=mc2
2<SUP>x+2</SUP>=64 2x+2=64
H<SUB>2</SUB>O H2O
Тэг BODY может содержать аттрибут TEXT, который определяет цвет шрифта для всей страницы. Значение аттрибута - шестнадцатиричное значение цвета или текстовое. <BODY TEXT="NAVY"> устанавливает цвет шрифта на странице темно-синим.
Также в тэге BODY можно определить каким цветом на вашей странице будут выделяться ссылки. Это аттрибуты:
LINK="#hhhhhh" - определяет цвет ссылки, по умолчанию голубой;
ALINK="#hhhhhh" - определяет цвет ссылки на документ, просмотренный ранее, по умолчанию фиолетовый;
VLINK="#hhhhhh" - опрделяет цвет активизированной ссылки, т.е. когда на нее наведен курсор и нажата кнопка мыши, по умолчанию красный.
Урок 7
Тема: таблицы.
Для чего нужны таблицы? Ответ на этот вопрос очевиден: для представления данных в табличном виде. Но не только.
До сих пор мы имели дело с документами, в которых существовал только один поток текста. На практике же порой хочется расположить текст в несколько колонок. В этом нам может помочь таблица.
В таблице может размещаться не только текст... ...но и
или картинки Таблицы позволяют достаточно точно контролировать расположение элементов на странице!
Чтобы разобраться в устройстве таблицы, расмотрим простой пример:
Таблица 1. Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Такая табличка реализуется следующим кодом:
<TABLE BORDER="1" WIDTH="200" BGCOLOR="#A0DDA0">
<CAPTION>Таблица 1.</CAPTION>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>
Таблица начинается с метки <TABLE> и заканчивается </TABLE>. Метка <TABLE> может включать следующие аттрибуты:
WIDTH="n" - определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;
ALIGN=LEFT - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);
BORDER="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;
BORDERCOLOR="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;
CELLSPACING="n" - определяет расстояние между рамками ячеек таблицы в пикселах;
CELLPADDING="n" - определяет расстояние в пикселах между рамкой ячейки и текстом;
BGCOLOR="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.
BACKGROUND="picture.gif" - заполняет фон таблицы изображением;
FRAME="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:
VOID - рамки нет (значение по умолчанию);
ABOVE - рисуется только граница сверху;
BELOW - только граница снизу;
HSIDES - границы сверху и снизу;
VSIDES - только границы слева и справа;
LHS - только левая граница;
RHS - только правая граница;
BOX - рисуются все четыре стороны;
BORDER - также все четыре стороны.
RULES="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения:
NONE - нет линий (значение по умолчанию);
GROUPS - линии будут только между группами рядов (THEAD, TFOOT, TBODY) и группами колонок (COLGROUP, COL) - о группах рассказано ниже;
ROWS - только между рядами;
COLS - только между колонками;
ALL - между всеми рядами и колонками.
Таблица может иметь заголовок - метки <CAPTION> и </CAPTION>. Располагаться он должен непосредственно после метки <TITLE ... >. Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы:
TOP - значение по умолчанию, заголовок над таблицей по центру;
LEFT - заголовок над таблицей слева;
RIGHT - заголовок над таблицей справа;
BOTTOM - заголовок под таблицей по центру.
Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь аттрибуты:
ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);
VALIGN=CENTER - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);
BGCOLOR="#hhhhhh" - устанавливает цвет фона для строки.
BACKGROUND="picture.gif" - заполняет фон строки изображением.
Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие ттрибуты:
ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);
VALIGN=CENTER - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);
WIDTH="n" - определяет ширину ячейки в n пикселов;
HEIGHT="n" - определяет высоту ячейки в n пикселов;
COLSPAN="n" - устанавливает "размах" ячейки по горизонтали. Т.е. COLSPAN="3", например, означает, что ячейка будет простираться на 3 колонки;
ROWSPAN="n" - устанавливает "размах" ячейки по вертикали. ROWSPAN= "2" означает, что ячейка занимает две строки таблицы;
NOWRAP - присутствие этого аттрибута показывает, что текст должен размещаться в одну строку;
BGCOLOR="#hhhhhh" - устанавливает цвет фона ячейки;
BACKGROUND="picture.gif" - заполняет фон ячейки изображением.
Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.
Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:
<THEAD>...</THEAD> - здесь объединяются ячейки верхнего заголовка таблицы;
<TFOOT>...</TFOOT> - ячейки нижнего заголовка таблицы;
<TBODY>...</TBODY> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп TBODY).
Каждая группа должна содержать хотя бы один ряд TR. Группа TFOOT должна находиться до TBODY, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все гуппы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков. К сожалению, большинство браузеров пока не поддерживают эту функцию. Можно использовать группы рядов для рисования линий только между ними (а не между всеми рядами), или выборочного форматирования частей таблицы (горизонтальное, вертикальное выравнивание содержимого ячеек).
Столбцы таблицы также могут быть объединены в группы при помощи меток <COLGROUP> и <COL>. Метка COLGROUP позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута RULES элемента TABLES. Метка COL позволяет применить какие-либо аттрибуты (выравнивание и т.п.) к нескольким столбцам не объединяя их в структурную группу.
<COLGROUP> может содержать следующие аттрибуты:
SPAN=n - в группе n столбцов (по умолчанию n=1). Браузер проигнорирует это значение, если между <COLGROUP> и <COL> есть хотя бы один элемент <COL>;
WIDTH=n - ширина столбцов в группе. Значение n может задаваться в пикселах, процентах. Может быть задано относительным значением, а также иметь значение "0*", т.е. столбцы будут минимальной ширины, исходя из размеров содержимого ячеек;
ALIGN, VALIGN - выравнивание содержимого ячеек.
<COL> содержит те же аттрибуты, что и <COLGROUP>. Если ширина столбцов задана и в COL, и в COLGROUP, то выбирается значение метки COL. Метка <COL> непарная, т.е. закрывающего тэга у нее нет.
Пример. Будет создана таблица шириной в 20 столбцов. Первый столбец будет 40 пикселов шириной с выравниванием влево. Второй - минимально возможной ширины с выравниванием по центру. Остальные 18 - шириной в 20 пикселов и выравниванием по центру.
<TABLE>
<COLGROUP WIDTH="20" ALIGN="CENTER">
<
<
<
</COLGROUP>
<TR>
.....Содержимое таблицы......
</TABLE>
К сожалению, браузеры Netscape поддерживают далеко не все возможности таблиц. В результате таблица, которая отлично выглядит в Microsoft Explorer, в Netscape может оказаться вообще без рамок.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет ( - обязательно должен набираться строчными буквами и закрываться точкой с запятой).
Любая ячейка таблицы может содержать в себе еще одну таблицу.
Возможные ошибки в таблицах:
Метки, устанавливающие шрифт (<B>, <I>, даже <FONT SIZE="n", FONT COLOR="#hhhhhh"), необходимо повторять для каждой ячейки. Нельзя установить шрифт сразу для всей таблицы.
Таблица - конструкция нежная. При потере только одной метки <TR> она может повести себя напредсказуемо. Отсутствие метки </TABLE> может привести к тому, что вся таблица вообще исчезнет с экрана.
Урок 8
Тема: списки.
Использование списков позволяет более удобно и наглядно представлять текст в окне браузера. Язык HTML поддерживает ненумерованные и нумерованные списки, списки определений.
Ненумерованный список определяется метками <UL></UL>. Нумерованный - метками <OL></OL>. Элементы списка отмечаются метками <LI>. В нумерованном списке элементы нумерует сам браузер. Примеры: <UL>Список коней:
<LI>Сивка
<LI>Бурка
<LI>вещая Каурка
</UL> <OL>Список коней:
<LI>Сивка
<LI>Бурка
<LI>вещая Каурка
</OL>
Это дает на экране следующие списки:
Список коней:
Сивка
Бурка
вещая Каурка
Список коней:
Сивка
Бурка
вещая Каурка
Заметим, метка <LI> непарная - т.е. метки </LI> не существует.
Список определений ограничивается метками <DL></DL>. Элементы списка отмечаются следующим образом: меткой <DT> - определяемое слово или выражение, меткой <DD> - само определение. Пример:
<DL>Расшифровка меток:
<DT>UL<DD>unordered list - ненумерованный список
<DT>OL<DD>ordered list - нумерованный список
<DT>LI<DD>list item - элемент списка
<DT>DL<DD>definition list - список определений
<DT>DT<DD>definition term - определяемый термин
<DT>DD<DD>definition description - описание определения
</DL>
Результат на экране:
Расшифровка меток:
UL
unordered list - ненумерованный список
OL
ordered list - нумерованный список
LI
list item - элемент списка
DL
definition list - список определений
DT
definition term - определяемый термин
DD
definition description - описание определения
Обратите внимание, метки <DT> и <DD> также, как и <LI>, не имеют парных закрывающих меток. В метке <DL> можно использовать аттрибут COMPACT, если его применить в предыдущем примере (<DL COMPACT>), то результат выглядел бы так:
Расшифровка меток:
UL
unordered list - ненумерованный список
OL
ordered list - нумерованный список
LI
list item - элемент списка
DL
definition list - список определений
DT
definition term - определяемый термин
DD
definition description - описание определения
Списки могут быть произвольно вложены (разумно ограничиться тремя уровнями вложения). Каждый элемент списка может содержать несколько абзацев.
В списках могут использоваться следующие аттрибуты:
TYPE - определяет стиль представления элементов списка (для меток <UL> и <OL>), подробнее ниже;
START - (только для нумерованного списка <OL>) определяет значение первого элемента списка. По умолчанию 1. Обратите внимание, что несмотря на то, что значение аттрибута - всегда числовое значение, элемент списка может быть быть нечисловым - в зависимости от значения аттрибута TYPE;
VALUE - (только для метки <LI>) устанавливает номер текущего элемента списка. Как и в предыдущем случае элемент списка может быть нечисловым, хотя его значение - всегда число.
Значение аттрибута TYPE для ненумерованного списка может быть следующим: DISC
SQUARE
CIRCLE
Для нумерованного списка значение аттрибута TYPE может быть одним из следующих:
Значение TYPE Стиль представления элемента списка
1 арабские цифры 1,2,3,...
a строчные буквы a,b,c,...
A прописные буквы A,B,C,...
i римские цифры i,ii,iii,...
I римские цифры I,II,III,...
По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.
Урок 9
Тема: &-последовательности, комментарии.
Как уже упоминалось, такие знаки как "<", ">", двойные кавычки и амперсанд ("&") используются в HTML для выделения тэгов, определения адресов, значений аттрибутов и т.п. Поэтому при просмотре документа браузером эти знаки не видны на экране. Если же их надо отобразить на экране, то используют так называемые &-последовательности:
<
последовательность < (от английского "less than");
>
последовательность > (от "greater than");
"
(двойные кавычки) последовательность " (от "quotations mark");
&
последовательность & (от "ampersand").
Внимание! &-последовательности должны набираться только в нижнем регистре (никаких < или " быть не должно!), и точка с запятой в конце последовательности обязательна.
Пример. Чтобы пользователь увидел на экране крейсер "Аврора", в HTML-документе должен быть следующий код: крейсер "Аврора"
Вообще &-последовательностей гораздо больше. Здесь стоит упомянуть еще о таких:
(nonbreaking space) - неразрывный пробел. Браузеры игнорируют множественные обычные пробелы, этот же будет показан. Также используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP 100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следущую, например, при изменении шрифта или размера окна браузера);
©
© (copyright) - авторские права (или как порой шутят: "скопировано правильно");
®
® (registered trademark) - зарегистрированный товарный знак.
Куда и к какой теме пристроить следующий материал я так и не смог придумать, поэтому добавил к этому уроку. Это комментарии. Текст, расположенный между в HTML-документе <!-- и --> не будет отображен на экране при просмотре, а будет виден лишь при редактировании документа. Пример:
<!-- Это мой комментарий -->
<!-- А этот комментарий занимает в тексте
несколько
строк -->
Не допустите ошибку! В комментариях не допускается вставлять два и более дефисов подряд: -- или ----- (разные браузеры по разному реагируют на это).
Урок 10
Тема: изображения-карты (image maps).
Изображения-карты позволяют выделить отдельные области изображений и определить для каждой из них свое действие. Скажем, какие-то части картинки будут служить ссылками на другие страницы, после клика по другим областям рисунка будет загружен и проигран музыкальный фрагмент, или выполнен JavaScript. Ниже будет рассмотрен пример.
Существует два типа изображений-карт:
клиентские (client-side) - когда пользователь кликает по рисунку, браузер сам интерпретирует координаты клика. Он выбирает ссылку, определенную для данной области, и переходит по ней (либо выполняет заданное действие);
серверные (server-side) - координаты клика передаются для интерпретации на сервер и уже он делает соответствующие действия (например, возвращает браузеру URL для перехода).
Первый тип проще и доступнее, поэтому далее рассматривать будем только его.
Для создания изображения-карты используются элементы <MAP> и <AREA>.
Элемент MAP (так и переводится - "карта") должен обязательно иметь аттрибут NAME. Это позволяет указать браузеру, к какому именно рисунку на странице относится данная карта.
Элемент AREA имеет следующие аттрибуты:
SHAPE - описывает форму выделяемой области, возможные значения:
RECT - прямоугольник;
CIRCLE - круг;
POLY - многоугольник;
DEFAULT - определяет всю область.
COORDS - координаты, определяющие размеры и положение области на изображении. Количество и порядок значений зависит от значения аттрибута SHAPE:
RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего);
CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус);
POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).
NOHREF - этот аттрибут определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца (подробности в примере ниже).
ALT - альтернативный текст для выделенной области, используется невизуальными браузерами.
TITLE - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
TARGET - значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ (подробнее в Уроке про фреймы).
Если описываемые области пересекаются (накладываются друг на друга), то приоритет имеет область, описанная первой.
Аттрибут USEMAP используется для того, чтобы соотнести какое-то изображение с определенной картой. Он может использоваться с элементами IMG (чаще всего!), OBJECT и INPUT.
Теперь обещанный пример:
Контуры ссылок точно повторяют контуры рисунков. В данном примере при клике на ссылку будет лишь появляться сообщение "Нажата ссылка...", чтобы зря не гонять вас по страницам и не отнимать драгоценное время! Рассмотрим пример подробнее:
<IMG SRC="../picts/maps.gif" BORDER="0" HEIGHT="145" WIDTH="360"
ALT="Пример изображения-карты" USEMAP="#primer">
<MAP NAME="primer">
<AREA SHAPE="poly" COORDS="11,9,200,9,200,26,61,26,61,36"
TITLE="Ссылка 1" HREF="javascript:alert('Нажата ссылка 1');">
<AREA SHAPE="poly" COORDS="11,55,11,134,60,134"
TITLE="Ссылка 2" HREF="javascript:alert('Нажата ссылка 2');">
<AREA SHAPE="rect" COORDS="80,64,200,94"
TITLE="Ссылка 3" HREF="javascript:alert('Нажата ссылка 3');">
<AREA SHAPE="rect" COORDS="80,104,200,134"
TITLE="Ссылка 4" HREF="javascript:alert('Нажата ссылка 4');">
<AREA SHAPE="circle" COORDS="285,72,43"
TITLE="Здесь нет ссылки" NOHREF>
<AREA SHAPE="circle"" COORDS="285,72,64"
TITLE="Ссылка кольцевая" HREF="javascript:alert('Нажата ссылка в виде кольца');">
</MAP>
У элемента IMG указан аттрибут USEMAP со значением "#primer". И далее следует карта (MAP) с именем "primer". Дело в том, что таких рисунков на странице может быть несколько, и соответственно несколько карт к ним. Более того, одна карта может подходить к нескольким рисункам (например, внизу и вверху страницы у вас размещены рисунки с навигацией по сайту). Чтобы браузер знал, какому рисунку какая карта соответствует, необходимо указывать имена.
Как сделано кольцо? Здесь две области в виде круга накладываются друг на друга. Первая область без ссылки (NOHREF) была описана первой, а уже потом вторая в виде круга большего диаметра. Ранее мы упоминали, что при наложении двух и более областей приоритет имеет область, описанная в тексте первой. Вот потому-то центральная часть круга и не имеет ссылки!
Об использовании аттрибута SHAPE со значением "default". Если в данном примере после всех ссылок добавить, например, такую строку:
<AREA SHAPE="default" HREF="javascript:alert('Вы нажали на фон');">
то весь оставшийся рисунок (в данном случае фон) станет ссылкой
Урок 11
Тема: звук на страничке.
Думаю, вам уже попадались странички, после загрузки которых начинала звучать музыка. Честно признаюсь, особого восторга от них я не испытываю. Но рассмотреть эту возможность надо.
Самый простой способ предложить посетителю послушать музыку, это сделать простую ссылку на звуковой файл. Вот так:
<A HREF="music/posen.mid">ДДТ, "Осень"</A>
Посетитель вашей страницы, увидев такую ссылку - ДДТ, "Осень", сам решит, хочет ли он это слушать и стоит ли по ней кликать. После клика по такой ссылке начнется загрузка файла, который затем можно прослушать.
Чаще используют тег <EMBED>. Действие этого элемента следующее: после загрузки страницы автоматически загружается и проигрывается звуковой файл. При этом в окне появляется панель проигрывателя (или пульт управления проигрывателя - как вам удобнее называть). Пример:
<EMBED SRC="music/osen.mid" AUTOSTART="TRUE">
Как всегда, тут не все так безоблачно, как хотелось бы. По своей давней традиции создатели Netscape и Explorer не договорились между собой, и потому в разных браузерах эта панель выглядит и, самое обидное, ведет себя по разному.
Элемент <EMBED> может иметь следующие аттрибуты:
WIDTH - ширина панели в пикселах (можно и в процентах);
HEIGHT - высота панели в пикселах (или процентах);
ALIGN - расположение панели относительно текста, возможные значения LEFT, RIGHT, CENTER;
HIDDEN - позволяет скрыть панель, значения аттрибута: TRUE - панель скрыта, FALSE - панель видима (значение по умолчанию);
AUTOSTART - значение TRUE - проигрыватель стартует автоматически, FALSE - ждет нажатия на кнопку "воспроизведение";
LOOP - цикл, т.е. при значении TRUE мелодия будет проигрываться по кругу, а при значении FALSE - только один раз. Если значением будет число, то Netscape проиграет мелодию указанное количество раз, для Explorer'а числовое значение равносильно значению TRUE.
Пример использования перечисленных выше аттрибутов:
<EMBED SRC="music/osen.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE">
В данном примере панель управления будет скрыта, воспроизведение звукового файла начинается автоматически, повторяться будет бесконечно. Думаю, посетитель вашего сайта достойно оценит такое решение!
Некоторые браузеры поддерживают еще аттрибут CONTROLS ("органы управления" - англ.), который позволяет сконфигурировать панель управления. Он может иметь следующие значения:
CONSOLE - панель обычного размера;
SMALLCONSOLE - панель меньшего размера;
PLAYBUTTON - вместо всей панели только кнопка "Воспроизведение";
PAUSEBUTTON - вместо всей панели только кнопка "Пауза";
STOPBUTTON - вместо всей панели только кнопка "Стоп";
VOLUMELEVER - вместо всей панели только регулятор громкости.
Элемент <EMBED> поддерживает звуковые файлы с расширениями MID, WAV, AIFF, AU, видеофайлы AVI.
Элемент <BGSOUND> задает фоновый звук для страницы, т.е. звуковой фрагмент, который будет звучать сразу после загрузки страницы. Браузером Netscape не поддерживается. Может иметь аттрибут LOOP, определяющий количество повторов фрагмента. Пример использования:
<BGSOUND SRC="music/osen.mid" LOOP="3">
Урок 12
Тема: вкратце о CSS.
Что такое CSS и для чего это нужно? CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл - описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т.е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!
Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:
<HTML>
<HEAD>
<TITLE>Изучим таблицы стилей!</TITLE>
</HEAD>
<BODY>
<H1>Большой заголовок</H1>
<H2>Заголовок поменьше</H2>
<P>А это уже абзац - самый обычный абзац.</P>
</BODY>
</HTML>
А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг <STYLE>:
<STYLE TYPE="text/css">
<!--
H1 { font-size: 40px; background: red; text-align: right;
font-family: helvetica, arial, sans-serif }
H2 { font-size: 20px; font-style: italic; font-family: helvetica,
arial, sans-serif }
P { background: silver; text-align: center; font-family: courier, fixed,
monospace }
-->
</STYLE>
Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример в действии.
Теперь разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация в комментарии (между "<!--" и "-->") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг <STYLE> и содержимое комментария, и ваша страница будет показана как самая обычная HTML-страница. Строка H1 указывает браузеру, что всякий текст, находящийся между метками <H1> и </H1>, должен отображаться шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и быть выровнен вправо. Строка H2 определяет, что шрифт в заголовках <H2> должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И, наконец, строка P определяет поведение всех абзацев на странице: на сером фоне, выровнены по центру, шрифт - courier, fixed или monospace.
Вот и все. Как говорится, просто и со вкусом. Таким образом вы можете управлять проактически всем, что появляется на вашей странице. Т.е. практически любому тегу можно придать новые свойства. А теперь подробнее.
Font-family - шрифт, используемый для отображения данного элемента. В идеале, конечно, было бы неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер просматривает этот список пока не встретит имеющийся в наличии шрифт. Например, компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: "P { font-family: arial, helvetica, sans-serif }"
Font-size - размер шрифта. Может указываться в точках (pt), пикселах (px).
Font-style: italic - курсив (наклонный шрифт).
Font-weight: bold - жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.
Text-transform - преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т.е. никаких действий).
Text-decoration - выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none(ничего). Например, чтобы ссылки в тексте не выделялись подчеркиванием, можно включить в заголовок документа следующий текст:
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
-->
</STYLE>
Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE...будут опускаться):
body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}
Т.е. цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).
Background-color - определяет цвет фона для какого-либо элемента. Например:
strong {background-color: yellow}
Текст между метками <STRONG> и </STRONG> будет показан на желтом фоне.
Background-image - позволяет сделать фон в виде рисунка. Пример:
blockquote {background-image: url(../pictures/million.jpg)}
В результате цитаты (т.е. текст между метками <BLOCKQUOTE> и </BLOCKQUOTE>) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.
Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:
IMG {text-align: center}
Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):
p {}
Margin - устанавливает отступ текста. Пример использования:
body {margin-left: 10pt; margin-right: 15pt}
В результате текст на странице будет отступать слева на 10 точек от края страницы, справа - на 15 точек. Также возможны варианты: margin-top (отступ сверху) и margin-bottom (отступ снизу).
Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:
border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style - стиль рамки. Может иметь следующие значения: Значение Описание Вид рамки (в вашем браузере!)
dashed пунктирная - в виде черточек dashed
dotted пунктирная - в виде точек dotted
double двойная линия double
inset с эффектом вдавленности inset
outset с эффектом выпуклости outset
ridge выпуклая рамка ridge
groove врезанная рамка groove
solid непрерывная линия solid
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:
blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double }
Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела.
А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с необходимыми свойствами. Например:
<P STYLE=" color: red; background-color: white">
или
<H3 STYLE="background-color: silver; border-width: 3px; border-style: groove;
border-color: #F0F0F0; text-align: center">
Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать аттрибут STYLE каждый раз, можно поступить следующим образом: определить в заголовке документа в тэге STYLE необходимый стиль и дать ему название, например:
<style type="text/css">
<!--
.krasota {px; background-color: aqua; color: purple;}
-->
</style>
Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:
<P CLASS="krasota">
И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением .css (например, "stili.css"). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции HEAD) и имеет такой вид:
<LINK REL=stylesheet HREF="stili.css" TYPE="text/css">
Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!
Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в .css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например, <P STYLE= ".......">), то к данному тэгу будет применяться второй стиль.
Урок 12
Тема: вкратце о CSS.
Что такое CSS и для чего это нужно? CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл - описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т.е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!
Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:
<HTML>
<HEAD>
<TITLE>Изучим таблицы стилей!</TITLE>
</HEAD>
<BODY>
<H1>Большой заголовок</H1>
<H2>Заголовок поменьше</H2>
<P>А это уже абзац - самый обычный абзац.</P>
</BODY>
</HTML>
А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг <STYLE>:
<STYLE TYPE="text/css">
<!--
H1 { font-size: 40px; background: red; text-align: right;
font-family: helvetica, arial, sans-serif }
H2 { font-size: 20px; font-style: italic; font-family: helvetica,
arial, sans-serif }
P { background: silver; text-align: center; font-family: courier, fixed,
monospace }
-->
</STYLE>
Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример в действии.
Теперь разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация в комментарии (между "<!--" и "-->") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг <STYLE> и содержимое комментария, и ваша страница будет показана как самая обычная HTML-страница. Строка H1 указывает браузеру, что всякий текст, находящийся между метками <H1> и </H1>, должен отображаться шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и быть выровнен вправо. Строка H2 определяет, что шрифт в заголовках <H2> должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И, наконец, строка P определяет поведение всех абзацев на странице: на сером фоне, выровнены по центру, шрифт - courier, fixed или monospace.
Вот и все. Как говорится, просто и со вкусом. Таким образом вы можете управлять проактически всем, что появляется на вашей странице. Т.е. практически любому тегу можно придать новые свойства. А теперь подробнее.
Font-family - шрифт, используемый для отображения данного элемента. В идеале, конечно, было бы неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер просматривает этот список пока не встретит имеющийся в наличии шрифт. Например, компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: "P { font-family: arial, helvetica, sans-serif }"
Font-size - размер шрифта. Может указываться в точках (pt), пикселах (px).
Font-style: italic - курсив (наклонный шрифт).
Font-weight: bold - жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.
Text-transform - преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т.е. никаких действий).
Text-decoration - выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none(ничего). Например, чтобы ссылки в тексте не выделялись подчеркиванием, можно включить в заголовок документа следующий текст:
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
-->
</STYLE>
Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE...будут опускаться):
body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}
Т.е. цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).
Background-color - определяет цвет фона для какого-либо элемента. Например:
strong {background-color: yellow}
Текст между метками <STRONG> и </STRONG> будет показан на желтом фоне.
Background-image - позволяет сделать фон в виде рисунка. Пример:
blockquote {background-image: url(../pictures/million.jpg)}
В результате цитаты (т.е. текст между метками <BLOCKQUOTE> и </BLOCKQUOTE>) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.
Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:
IMG {text-align: center}
Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):
p {}
Margin - устанавливает отступ текста. Пример использования:
body {margin-left: 10pt; margin-right: 15pt}
В результате текст на странице будет отступать слева на 10 точек от края страницы, справа - на 15 точек. Также возможны варианты: margin-top (отступ сверху) и margin-bottom (отступ снизу).
Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:
border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style - стиль рамки. Может иметь следующие значения: Значение Описание Вид рамки (в вашем браузере!)
dashed пунктирная - в виде черточек dashed
dotted пунктирная - в виде точек dotted
double двойная линия double
inset с эффектом вдавленности inset
outset с эффектом выпуклости outset
ridge выпуклая рамка ridge
groove врезанная рамка groove
solid непрерывная линия solid
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:
blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double }
Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела.
А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с необходимыми свойствами. Например:
<P STYLE=" color: red; background-color: white">
или
<H3 STYLE="background-color: silver; border-width: 3px; border-style: groove;
border-color: #F0F0F0; text-align: center">
Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать аттрибут STYLE каждый раз, можно поступить следующим образом: определить в заголовке документа в тэге STYLE необходимый стиль и дать ему название, например:
<style type="text/css">
<!--
.krasota {px; background-color: aqua; color: purple;}
-->
</style>
Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:
<P CLASS="krasota">
И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением .css (например, "stili.css"). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции HEAD) и имеет такой вид:
<LINK REL=stylesheet HREF="stili.css" TYPE="text/css">
Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!
Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в .css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например, <P STYLE= ".......">), то к данному тэгу будет применяться второй стиль.
Урок 12
Тема: фреймы.
Объяснить, что такое фреймы и для чего они нужны, лучше всего на примере. Страница, которую вы сейчас читаете, состоит из двух фреймов: левого, в нем перечислены все уроки, и правого с собственно самими уроками. Вы можете прокручивать содержимое правого фрейма, в то время как левый остается неподвижным. Это позволяет вам в любой момент легко перейти на любой урок, не разыскивая ссылку внизу или вверху страницы. Словом, разумное использование фреймов позволяет существенно упростить навигацию по сайту и улучшить его дизайн.
Суть фреймов в принципе проста: страница делится на несколько окон, в каждое из которых загружается своя страничка (или картинка), со своим собственным адресом. К примеру, в левом окне - "vasja.html", а в правом - "pupkin.html" (которая физически может находиться где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать третью, в которой и будут определяться размеры и свойства этих окон. Для этого используются только два тега - <FRAMESET> и <FRAME>. Чтобы их объяснить, рассмотрим пример:
Во-первых, создадим два файла - vasja.html и pupkin.html: <html>
<head>
<title>фрейм</title>
</head>
<body>
Меня зовут Вася!
</body>
</html>
<html>
<head>
<title>фрейм</title>
</head>
<body>
А фамилия моя Пупкин. Это звучит круто!
</body>
</html>
Теперь делаем третий файл, назовем его index.html (назвать можно и по другому):
<html>
<head>
<title>Страница с фреймами!</title>
</head>
<frameset cols="50%,50%">
<frame src="vasja.html">
<frame src="pupkin.html">
</frameset>
</html>
Вот его-то мы и рассмотрим подробнее. Во-первых, в нем отсутствуют теги <body> и </body>. Можно сказать, их роль выполняет тег <frameset>, хотя это не совсем верно. Тег <frameset> (переводится как "набор фреймов") с аттрибутом cols="50%,50%" указывает браузеру, что страница должна быть поделена на два окна (фрейма), каждый шириной в 50% от ширины страницы. Тег <frame> определяет содержимое и свойства каждого фрейма (заметьте, что он не имеет закрывающего тега). В данном случае указано, что содержимым первого фрейма является файл vasja.html, второго - файл pupkin.html (фреймы считаются слева направо и сверху вниз. Здесь - этот пример в действии (откроется в новом окне). Все просто! Еще несколько примеров: 20% 30% 50%
Три фрейма разной ширины.
<frameset cols="20%,30%,50%">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
25%
75%
Фреймы можно расположить рядами так же легко, как и столбцами. Просто меняем аттрибут cols на rows:
<frameset rows="25%,75%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
Значения аттрибутов cols и rows могут выражаться не только в процентах. cols="150,*,100" - страница разделена на три столбца, где ширина левого 150 пикселов, правого - 100 пикселов, а средний столбец - это все оставшееся между ними место (знак *). Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину (или высоту) одного из них определить значком *. Можно, например, написать cols="150,550,100", и все будет выглядеть отлично на вашем мониторе с разрешением 600*800. Но стоит только изменить разрешение, и картина полностью изменится. Потому-то и рекомендуется использовать "звездочку". 200 * 100
Пример:
<frameset cols="200,*,100">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
150 * 2*
Можно устанавливать пропорции для окон. В этом примере левый фрейм будет шириной в 150 пикселов, а остальную часть страницы поделят между собой 2-й и 3-й фреймы, причем третий фрейм будет в 2 раза шире первого.
<frameset cols="150,*,2*">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
*
15%
3*
То же, но для рядов: 2-й фрейм занимает 15% от высоты окна, а 1-й и 3-й - все остальное в пропорции 1:3.
<frameset rows="*,15%,3*">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
Фреймы могут быть вложенными друг в друга. Это позволяет создавать более сложные конструкции страниц. Рассмотрим несколько примеров: 40% 60%
*
<frameset rows="25%,*">
<frameset cols="40%,60%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
<frame src="page3.html">
</frameset>
В этом примере окно разбито на два фрейма: верхний занимает 25% высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два, где левый фрейм занимает 40% от ширины окна, а правый - 60 процентов.
Еще один пример. Предположим, мы хотим сделать такую страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее: Logo Text
Menu
Banner
<frameset cols="200,*">
<frameset rows="150,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frameset rows="*,70">
<frame src="text.html">
<frame src="banner.html">
</frameset>
</frameset>
Рассмотрим аттрибуты тегов <frameset> и <frame>. Первый из них, <frameset> - парный тег, т.е. он обязательно должен иметь закрывающий тег. Может включать следующие аттрибуты:
cols и rows - применение и возможные значения этих аттрибутов были рассмотрены выше. Внимание! Не рекомендуется одновременное использование аттрибутов cols и rows, т.е. в некоторых браузерах конструкция <frameset cols="50%,50%" rows="30%,70%"> может привести к непредсказуемым результатам;
border="x" - толщина рамок фреймов в пикселах;
frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или 1) рамок в определенном фреймсете. Например, таким образом в предыдущем примере можно было бы убрать только рамки между баннером и текстом и между логотипом и меню, а между левым и правым фреймами оставить;
bordercolor="#hhhhhh" - цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное слово (red, blue, teal, olive и т.д.);
Тег <frame> может включать следующие аттрибуты:
src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм;
name="имя" - присваивает имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме (подробнее в следующем абзаце);
marginwidth="x" - величина отступа содержимого фрейма (текста, графики и т.п.) от границ по горизонтали. Выражается в пикселах, минимальное значение 1;
marginheight="y" - величина отступа по вертикали. Минимальное значение также 1;
scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения аттрибута:
yes - полосы прокрутки присутствуют обязательно;
no - полосы прокрутки отсутствуют всегда - независимо от того, вмещается ли документ в фрейм целиком или нет;
auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм;
noresize - наличие этого аттрибута запрещает изменение размеров фрейма пользователем (обычно любую границу фрейма можно с легкостью переместить мышкой).
Как указывалось выше, аттрибут name тега <frame> позволяет присвоить каждому фрейму свое имя, что позволяет управлять содержимым одного фрейма из другого (т.е. как в этих уроках - вы кликаете по ссылке в левом фрейме, а меняется содержимое правого). Как это сделать, рассмотрим на примере: Меню Урок 1
В левом фрейме у нас меню, а в правом - урок первый:
<frameset cols="200,*">
<frame src="menu.html">
<frame src="urok1.html" name="content">
</frameset>
Правому фрейму мы присвоили имя "content" (можно любое другое). Теперь создадим файл menu.html, это будет меню для левого фрейма:
<html>
<head>
<title>menu</title>
</head>
<body>
<a href="urok1.html" target="content">Урок 1</a>
<br>
<a href="urok2.html" target="content">Урок 2</a>
<br>
<a href="urok3.html" target="content">Урок 3</a>
<br>
<a href="urok4.html" target="content">Урок 4</a>
<br>
</body>
</html>
Теперь клик по ссылке "Урок 2" вызовет загрузку страницы "urok2.html" в фрейме с именем "content" (т.е. в правом фрейме). При отсутствии аттрибута target (перводится с английского как "цель") загрузка произошла бы в левом фрейме, где находится сама ссылка. Этот аттрибут в данном примере можно указать только один раз - как аттрибут тега <base>, т.е. все ссылки по умолчанию будут загружаться в фрейме с именем "content". В таком случае текст будет выглядеть так:
<html>
<head>
<title>menu</title>
</head>
<body>
<base target="content">
<a href="urok1.html">Урок 1</a>
<br>
<a href="urok2.html">Урок 2</a>
<br>
<a href="urok3.html">Урок 3</a>
<br>
<a href="urok4.html">Урок 4</a>
<br>
</body>
</html>
Кроме имени фрейма значением аттрибута target может быть одно из следующих зарезервированных слов:
_blank - браузер должен открыть новое окно и загрузить в него документ (на который была ссылка) - обычно используется для того, чтобы посетитель не уходил по ссылке с вашего сайта;
_top - браузер должен загрузить документ в этом же окне, предварительно очистив его от всех фреймов - аттрибут с этим значением надо указывать обязательно, если вы делаете ссылку на другой сайт из фрейма. В противном случае этот сайт будет загружен в фрейме;
_self - документ загружается в том же фрейме, где находится сама ссылка. Может потребоваться в случае, если в тексте есть строка <base target="имя_фрейма">;
_parent - документ загружается в родительский фреймсет текущего фрейма.
Все вышеперечисленные значения должны начинаться с символа подчеркивания и набираться только прописными буквами.
Используя на своем сайте фреймы, нельзя забывать о том, что некоторые браузеры могут не поддерживать фреймы - старые браузеры, речевые и др. Специально для них существует тег noframes, в котором можно сделать "нефреймовую" версию сайта, или хотя бы просто перечислить ссылки на страницы сайта. Пример:
<html>
<head>
<title>Уроки HTML</title>
</head>
<frameset cols="200,*">
<frame src="menu.html">
<frame src="urok1.html" name="content">
</frameset>
<noframes>
<body>
<p>Эта страница использует фреймы.
Поскольку Ваш браузер не может просматривать такие страницы,
воспользуйтесь следующими ссылками:
<p><a href="urok1.html">Урок 1</a>
<p><a href="urok2.html">Урок 2</a>
<p><a href="urok3.html">Урок 3</a>
<p><a href="urok4.html">Урок 4</a>
</body>
</noframes>
</html>
В результате браузер, поддерживающий просмотр фреймов, отобразит на эране только фреймы с их содержимым и проигнорирует все, что находится между <noframes> и </noframes>. Остальные браузеры не обратят никакого внимания на содержимое контейнера <frameset>, но воспоизведут содержимое <noframes>. Еще одна причина, по которой следует обращать внимание на тег <noframes> - далеко не все поисковые роботы понимают фреймы. Поэтому без <noframes> ваша страница рискует остаться непроиндексированной.
Придерживайтесь следующего порядка размещения: сперва контейнер <frameset>, а потом - <noframes> (т.е. как в примере). В противном случае возможна ошибка Netscap'а.
Существует еще одна разновидность фреймов - встроенный фрейм (inline frame). Он может быть вставлен непосредственно в текст страницы и выглядит следующим образом:
Для встраивания такого фрейма используется тег <iframe>. Наличие закрывающего тега обязательно. Между ними можно вставлять любой текст для браузеров, не поддерживающих фреймы. Аттрибуты:
src="filename.html" - указывает адрес содержимого фрейма;
name="name" - присвает имя фрейму;
width="x" - ширина фрейма;
height="y" - высота фрейма;
scrolling="yes|no|auto" - наличие полос прокрутки;
frameborder="1|0|yes|no" - наличие (yes или 1) или отсутствие (no или 0) рамки вокруг фрейма;
marginwidth="x" - величина отступа содержимого фрейма от границ по горизонтали;
marginheight="y" - величина отступа по вертикали.
Для примера выше был использован следующий код:
<iframe src="examples/iframe.htm" width="300" height="70"
scrolling="auto" frameborder="1">
Ваш браузер не поддерживает фреймы.
Здесь должен быть размещен пример
встроенного фрейма.
</iframe>
Размеры такого фрейма не могут изменяться пользователем. Поэтому аттрибут noresize не используется.
И в заключение совет. Если ваш сайт будет построен с использованием фреймов, то часто посетители будут к вам приходить с поисковиков, и чаще всего они будут попадать на одну из внутренних страниц сайта. Естественно, сайт они увидят совсем не в том виде, как это задумывалось вами. Чтобы этого не происходило, вставьте в текст страниц такой код:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
document.writeln("Эту страницу лучше просматривать во фрейме.");
document.writeln("Если ваш браузер поддерживает фреймы, то");
document.writeln("<A HREF=\"index.html\">кликните здесь.</A>");
// -->
</SCRIPT>
Или такой:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
self.parent.location="index.html";
// -->
</SCRIPT>
Первый скрипт выводит предложение перезагрузить страницу, если она была загружена не в фрейме. Второй делает то же самое, но без предупреждения.
