На главную
 
Таги (теги, тэги) ?2
 
Представь себе, что у тебя документ длиной экранов так 15. Представляешь, какая морока искать, что-нибудь там??? Чтобы тебе стало полегче, наши уже знакомые бородатые дядьки придумали систему разметки документов. Иначе говоря, по всему документу можно расставить метки-якоря. А потом загружать документ не сначала, а начиная с одной из этих меток.
Для формирования метки в документе служит атрибут NAME у тага <A>.
Пример:
<A NAME="label1"> Часть 1. </A>

А теперь посмотрим, как же начать загрузку этого документа с метки label1. Надо только немножко дописать в ссылку на этот документ. Пусть он называется LongDoc.html:
<A HREF="LongDoc.html#label1"> Перейти к части 1 </A>
Если же ты хочешь перейти к метке в пределах одного документа, то нужно просто не указывать имя файла:
<A HREF="#label1"> Перейти к части 1 </A>
Посмотрите пример!!!
Эта фишка очень удобна для создания содержания в начале документа. Ссылки лишь переносят тебя по различным частям этого документа. Нравится? Знал бы Лев Толстой про такую штуку - наверняка бы "Войну и мир" мы читали бы в гипертексте.
Пока ты читаешь эту книжку, у тебя, наверное, очень сильно развивается воображение. Ведь я постоянно прошу тебя что-то представить.
Так вот, представь себе, что у тебя есть картинка с географической картой Москвы, и ты собираешься создать гипертекстовую энциклопедию, ну например, по тусовочным местам нашей столицы. Хотелось бы при этом достичь вот чего: кликаем мышкой в какую-нибудь область этой самой карты - и нам открывается страница с описанием, какое тусовое место там есть.
Чувствуешь разницу? Мы хотим, чтобы наша картинка была не просто ссылкой на одну страницу, а чтобы открывались разные страницы в зависимости от того, в какое место картинки мы ткнемся мышкой. Вот здесь-то нам и поможет технология Imagemaps.
Все начинается с формирования областей картинки, которые будут ссылками на разные страницы. Происходит это в блоке <MAP></MAP>. У этой метки есть обязательный атрибут NAME, значение которого является именем карты. Сделано это для того, чтобы в одном документе можно было использовать несколько разных карт.
Разметку карты нужно делать с помощью меток <AREA> внутри блока <MAP>. Метки <AREA> имеют несколько обязательных атрибутов, с помощью которых и происходит сей творческий и увлекательный процесс (кстати AREA по английски - это и есть область).
Вот список необходимых атрибутов для меток <AREA>:
SHAPE - задает форму области. Принимает 3 стандартных значения: RECT - прямоугольная область, CIRCLE - окружность, POLY - любой многоугольник
COORDS- здесь через запятую задаются координаты области. Но по-разному в зависимости от формы области:
RECT - задаются 4 числа (коорд. левого верхнего и правого нижнего углов)
CIRCLE - задаются 3 числа (коорд. центра окружности и радиус)
POLY - задается в зависимости от кол-ва вершин многоугольника (каждая вершина задается 2мя координатами - X,Y)
HREF - значением является ссылка, куда мы перейдем, если кликнем в этой области
NOHREF - атрибут не имеет значений. Им помечаются неактивные области без ссылок куда-либо.

Вот это почти все, что нужно знать, чтобы создать интерактивную карту в документе. Теперь просто подведем итог тому, что было написано до этого. Думаю, сейчас станет немного понятнее:
Пример:
<MAP NAME="test">
<AREA SHAPE="RECT" COORDS="0,0,10,10" HREF="http://www.botik.ru">
<AREA SHAPE="CIRCLE" COORDS="20,10,10" HREF="http://www.mail.ru">
<AREA SHAPE="POLY" COORDS="20,0,20,20,30,10" NOHREF>
</MAP>

Последнее, что тебе необходимо будет сделать, чтобы карта начала работать, - это вставить в документ картинку-карту так, как мы это обычно делаем. Новое здесь то, что в метку <IMG> нужно будет вставить атрибут USEMAP следующим образом:
<IMG SRC="pics/mapbig.jpg" ALT="Наша карта" USEMAP="#test">
Посмотрите пример!!!
Как ты, наверное, уже догадался, атрибут USEMAP просто-напросто подключает блок разметок <MAP></MAP> с именем test. Очень важно, чтобы ты не забыл перед именем карты поставить знак #.
Существует много способов задания цвета. В HTML для этого используется стандартная RGB палитра (RGB - от слов Red, Green, Blue), а цвет кодируется цифрами в шестнадцатеричной системе счисления. Уффф, звучит ужасно, а? На самом деле все не так страшно.
В шестнадцатеричной системе используется вместо привычных 10 цифр - 16. А именно: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Соответственно, самая большая цифра - это F, самая маленькая 0. Нетрудно угадать, что, например, A+4=E.
Теперь вернемся к цвету. Любой цвет задается шестью такими цифрами по следующему правилу: первые две цифры - сколько в нашем цвете красного, вторые две - сколько зеленого, третьи две - сколько синего. Грубо говоря, каждая пара цифр задает как бы яркость данной компоненты. Тогда 00 - минимальная "яркость", FF - максимальная. Перед цветом должен ставиться знак "#", обозначающий 16-ричное число.
Примеры:

#000000 - черный #FF0000 - красный #00FF00 - зеленый
#0000FF - синий #FFFFFF - белый #FFFF00 - желтый
#AAAAAA - серый #FFFFCC - песочный #FFAA00 - оранж
это чёрный (#000000) это красный(#FF0000)
это синий(#0000FF) это белый(#FFFFFF)
это жёлтый(#FFFF00) это серый(#AAAAAA)
это песочный(#FFFFCC) это оранжевый(#FFAA00)
Ну вот мы и подошли к тому, чтобы наконец раскрасить весь документ в цвет детской неожиданности (а то и хуже). За изменение цвета текста отвечает таг <FONT> в совокупности с атрибутом COLOR:
<FONT COLOR="цвет"> какой-нибудь текст </FONT>
Кроме COLOR имеются еще два часто используемых атрибута. Это:
SIZE - размер букв (значение - просто число)
FACE - позволяет применить к тексту шрифт (значение - точное название шрифта)
Пример:
<FONT SIZE=4 FACE="Arial,Helvetica,Verdana"> . . . </FONT>

В браузере Исходный код
Hellcome to Well <FONT SIZE=4 FACE="Arial,Helvetica,Verdana">Hellcome to Well </FONT>
Здесь я использовал три шрифта. Вероятность того, что хотя бы один из них есть у пользователя, составляет 99,9%.
Ну, и наконец общий пример применения тага <FONT>:
<FONT COLOR="#FF0000" SIZE="3" FACE="Arial,Helvetica">
очень красный текст</FONT>
В браузере Исходный код
очень красный текст <FONT COLOR="#FF0000" SIZE="3" FACE="Arial,Helvetica"> очень красный текст</FONT>
Пришло, наверное, время побаловаться с нашим документом по крупному. Сейчас ты узнаешь, какие у документа есть общие свойства и как их можно изменять. Да-а-а, это будет покруче, чем воровать плюшки с полдника. Если ты еще помнишь, с чего мы начали, то должен знать, что содержимое документа начинается после тага . А вот внутри этой конструкции и сидят атрибуты, задающие глобальные свойства документа. Вот они!!!
BGCOLOR - задает цвет фона (значение - цвет в формате RGB)
BACKGROUND - позволяет использовать картинку в качестве фона. Причем картинка заполняет собой все окно браузера (значение - указание пути до файла с картинкой)
TEXT - устанавливает общий цвет текста в документе (значение - цвет в формате RGB)
LINK - устанавливает цвет не посещенных ссылок (значение - цвет в формате RGB)
ALINK - устанавливает цвет ссылки в момент нажатия на нее мышью (значение - цвет в формате RGB)
VLINK - устанавливает цвет посещенных ссылок (значение - цвет в формате RGB)

Рекомендую использовать сразу оба атрибута BGCOLOR и BACKGROUND. Причем цвет фона подбирать близким к фоновой картинке. Во-первых, по сети просто цвет передается быстрее, чем картинка. Во-вторых, иногда пользователи отключают загрузку картинок, поэтому пусть в таком случае загружается хотя бы цвет. Ну и в-третьих, наблюдается красивый эффект: если ты правильно подобрал цвет фона, то фоновая картинка будет как бы "проявляться" из фона.
Общий пример:
<BODY BGCOLOR="#FFFFFF" BACKGROUND="bkgr/back12.gif" TEXT="#000099" LINK="#00AA00" ALINK="#00FF00" VLINK="#006600">


Hellcome to Well
&#204;&#196;&#202;&#214;
<BODY BGCOLOR="#FFFFFF" TEXT="#000099" LINK="#00AA00" ALINK="#00FF00" VLINK="#006600"> <center>Hellcome to Well</center> <center><a href="http://www.botik.ru/ICCC">&#204;&#196;&#202;&#214;</a></center>
Думаю, мне не нужно объяснять тебе, что такое таблица? Ну тогда сразу перейдем к сути. Я никого не обману, если скажу, что таблица - это одна из наиболее часто используемых конструкций языка HTML Чтобы это понять, достаточно вспомнить фишку с пробелами, которые сокращаются до одного по поводу и без. Поэтому, например, проблемно разместить в одну строчку картинки и под каждой сделать подписи. Представил, сколько тебе придется попотеть? А вот с использованием таблицы эта задача решается легко и приятно.
Посмотрим как устроена простейшая таблица (например, 2X2):

<TABLE>
<TR>
<TD> 1 стр. 1 стлб. </TD>
<TD> 1 стр. 2 стлб. </TD>
</TR><TR>
<TD> 2 стр. 1 стлб. </TD>
<TD> 2 стр. 2 стлб. </TD>
</TR>
</TABLE>
&#194; &#225;&#287;&#224;&#243;&#231;&#229;&#287;&#229;
1 &#241;&#242;&#287;. 1 &#241;&#242;&#235;&#225;. 1 &#241;&#242;&#287;. 2 &#241;&#242;&#235;&#225;.
2 &#241;&#242;&#287;. 1 &#241;&#242;&#235;&#225;. 2 &#241;&#242;&#287;. 2 &#241;&#242;&#235;&#225;.
&#200;&#241;&#245;&#238;&#228;&#237;&#251;&#233; &#234;&#238;&#228;
<TABLE BORDER=1>
<TR>
<TD> 1 &#241;&#242;&#287;. 1 &#241;&#242;&#235;&#225;. </TD>
<TD> 1 &#241;&#242;&#287;. 2 &#241;&#242;&#235;&#225;. </TD>
</TR><TR>
<TD> 2 &#241;&#242;&#287;. 1 &#241;&#242;&#235;&#225;. </TD>
<TD> 2 &#241;&#242;&#287;. 2 &#241;&#242;&#235;&#225;. </TD>
</TR>
</TABLE>
Представь, что ты вдруг захотел объединить несколько ячеек своей таблицы в одну. Скажу сразу, в HTML это делается куда проще, чем в Microsoft Word. Нужно всего лишь использовать атрибуты COLSPAN и ROWSPAN.
COLSPAN - задает число, сколько ячеек по горизонтали займет данная.
ROWSPAN - задает число, сколько ячеек по вертикали займет данная.

Предположим, что у нас есть таблица 3 строки X 3 столбца. Теперь, например, мы хотим соединить первые 2 ячейки в 1 и 2 строках. Для этого нужно просто вставить COLSPAN="2" ROWSPAN="2" в 1 ячейку 1 столбца. Посмотрим, что получилось:
<TABLE>
<TR><TD COLSPAN="2" ROWSPAN="2"> Слияние </TD>
<TD> 1 стр. 3 стлб. </TD>
</TR><TR>
<TD> 2 стр. 3 стлб. </TD>
</TR><TR><TD> 3 стр. 1 стлб. </TD>
<TD> 3 стр. 2 стлб. </TD>
<TD> 3 стр. 3 стлб.</TD>
</TR>
</TABLE>

&#194; &#225;&#273;&#224;&#243;&#231;&#229;&#273;&#229;
&#209;&#235;&#232;&#255;&#237;&#232;&#229; 1 &#241;&#803;&#273;. 3 &#241;&#803;&#235;&#225;.
2 &#241;&#803;&#273;. 3 &#241;&#803;&#235;&#225;.
3 &#241;&#803;&#273;. 1 &#241;&#803;&#235;&#225;. 3 &#241;&#803;&#273;. 2 &#241;&#803;&#235;&#225;. 3 &#241;&#803;&#273;. 3 &#241;&#803;&#235;&#225;.
&#200;&#241;&#417;&#238;&#228;&#237;&#251;&#233; &#234;&#238;&#228;
<TABLE>
<TR><TD COLSPAN="2" ROWSPAN="2"> &#209;&#235;&#232;&#255;&#237;&#232;&#229; </TD>
<TD> 1 &#241;&#803;&#273;. 3 &#241;&#803;&#235;&#225;. </TD>
</TR><TR>
<TD> 2 &#241;&#803;&#273;. 3 &#241;&#803;&#235;&#225;. </TD>
</TR><TR><TD> 3 &#241;&#803;&#273;. 1 &#241;&#803;&#235;&#225;. </TD>
<TD> 3 &#241;&#803;&#273;. 2 &#241;&#803;&#235;&#225;. </TD>
<TD> 3 &#241;&#803;&#273;. 3 &#241;&#803;&#235;&#225;.</TD>
</TR>
</TABLE>
Вот и все! Но обрати внимание: хотя в примере таблица нарисована с видимой границей, на самом деле границы не будет. И как же с этим бороться? Прочитай следующую часть.
<TABLE>
Сейчас я расскажу об основных атрибутах тага <TABLE>. Если немного напрячь мозги, то можно сообразить, что эти атрибуты определяют некие общие свойства таблицы. Итак,
WIDTH - задает ширину таблицы (значение определяется либо жестко в пикселях, либо в процентах)
ALIGN - определяет выравнивание таблицы (принимает значения LEFT и RIGHT, значение CENTER работает не во всех браузерах. Чтобы отцентрировать таблицу, лучше использовать конструкцию <CENTER></CENTER>)
BORDER - толщина границы (задается в пикселях)
CELLSPACING - определяет расстояние между соседними ячейками (значение - в пикселях)
CELLPADDING - определяет расстояние между границей ячейки и ее содержимым (значение - в пикселях)
BGCOLOR - задает цвет фона в таблице (работает хорошо не во всех браузерах)
<TR>
В отличие от предыдущей части здесь мы рассмотрим атрибуты, область действия которых ограничивается одним рядом. То есть те атрибуты, которые ты, не мудрствуя лукаво, задашь внутри тага <TR>, будут работать только внутри этого ряда.
Атрибутов, хорошо работающих в большинстве браузеров, всего три:
ALIGN - выравнивает содержимое всех ячеек в пределах ряда (допустимые значения: LEFT, RIGHT, CENTER, JUSTIFY)
VALIGN- выравнивает содержимое всех ячеек в пределах ряда (допустимые значения: TOP- по верхнему краю, MIDDLE - по центру, BOTTOM - по нижнему краю, BASELINE - первая строка каждой ячейки начинается с одной линии)
BGCOLOR- задает цвет фона для всех ячеек в пределах ряда (значение - цвет в стандартном формате)
<TD> Если ты совсем уж выпендрежник и собираешься менять свойства у каждой ячейки в отдельности, то эта часть специально для тебя. Здесь мы рассмотрим атрибуты, которые можно использовать только для конкретной ячейки.
ALIGN - выравнивает содержимое ячейки (допустимые значения LEFT, RIGHT, CENTER, JUSTIFY)
VALIGN - обеспечивает вертикальное выравнивание содержимого внутри ячейки (допустимые значения TOP, MIDDLE, BOTTOM)
BGCOLOR - задает цвет фона в ячейке (значение - цвет в стандартном формате)
WIDTH - задает ширину ячейки (значение - в пикселях)
HEIGHT - задает высоту ячейки (значение - в пикселях)
NOWRAP - атрибут без значения, включает режим, в котором слова не переносятся на новую строку при изменении размеров окна браузера.
COLSPAN - определяет количество столбцов под данную ячейку (значение - целое число)
ROWSPAN - определяет количество строк под данную ячейку (значение - целое число)
Если ты до сих пор думаешь, что самое сложное мы уже прошли, то ты глубоко заблуждаешься. На самом деле сейчас и начнется одна из сложных тем.
Итак, что же такое фреймы? Это инструмент, с помощью которого можно загрузить в одно окно браузера несколько документов. Мало того, можно даже по ссылкам путешествовать между этими документами. Но все по порядку.
Пусть мы хотим, чтобы у нас загрузились два документа в одном окне одновременно. Для этого используется конструкция <FRAMESET></FRAMESET>. У нее есть два атрибута, которые позволяют нам разбить экран на две вертикальные либо горизонтальные части:
COLS - обеспечивает вертикальную разбивку (значение - ряд чисел через запятую, определяющих пространство для каждого фрейма. Задавать эти числа можно либо в пикселях, либо в процентах. Если ты укажешь вместо одного из чисел звездочку, то под этот фрейм будет отведено все оставшееся место в окне)
ROWS - аналогично предыдущему, только разбивка получается горизонтальной.
Пример:
<FRAMESET COLS="25%,*"> - разбивает окно так, что под первый фрейм отводится 25% экрана, под второй - все оставшееся место.
Примечание. Чтобы создать фрейм, тебе понадобится новый HTML-файл. Вставлять конструкцию <FRAMESET></FRAMESET> можно где угодно, кроме блока <BODY></BODY>. Я это делаю обычно между тагами </HEAD> и <BODY>.
Следующий шаг- это поиск файлов, которые будут загружены в каждый из фреймов (то есть определение либо полного, либо относительного пути до каждого). Чтобы загрузить файл во фрейм, используется таг <FRAME>. Необходимый атрибут SRC - ищет файл по указанному пути и загружает во фрейм (значение - путь до файла)
Пример полностью созданного фрейма:
<FRAMESET COLS="40%,*">
<FRAME SRC="test1.htm">
<FRAME SRC="test2.htm">
</FRAMESET>

Левый фрейм
Назад
Правый фрейм
Код всего документа
<FRAMESET COLS="40%,*">
<FRAME SRC="test1.htm">
<FRAME SRC="test2.htm">
</FRAMESET>


Давай окинем замученным взглядом то, что мы сделали. Мы создали два фрейма с вертикальной разбивкой, под первый фрейм отвели 40% экрана, под второй - все оставшееся место, загрузили в первый фрейм файл test1.htm, во второй - test2.htm. Вот и все.
Теперь, если ты загрузишь файл с фреймами в браузере, то увидишь забавную штуку.
Чтобы понять, о чем здесь будет идти речь, попробуй сделать вот что: создай ссылку в одном из файлов, которые загружаются во фрейм (в нашем случае, например, test1.htm). Создал? Теперь открой в браузере документ с фреймами и нажми на ссылку... Если все сделано правильно, то ссылка откроется в том же самом фрейме!
Так вот, в HTML есть возможность делать так, чтобы сама ссылка находилась в одном фрейме, а открывалась ссылка в другом. Как тебе такой прибамбас? Лично мне так очень нравится, и я это довольно часто использую. Например, в левом фрейме создаешь меню из ссылок, а открываешь ссылки в правом фрейме. Выглядит даже очень симпатично.
Как же это сделать? А очень легко. У тага <FRAME> есть атрибут
NAME - позволяет присвоить каждому фрейму уникальное имя (значение - любой набор алфавитно-цифровых символов, а проще - какое-нибудь слово)
Мы должны каждый из фреймов как-нибудь обозвать. Например,
<FRAME SRC="test1.htm" NAME="left">
<FRAME SRC="test2.htm" NAME="right">
Теперь осталось всего-лишь немного изменить нашу ссылку. Пусть есть ссылка на http://www.botik.ru/ICCC, находится она в левом фрейме, а открывать мы ее хотим в правом. Тогда нужно вставить в нее следующее:
<A HREF="http://www.botik.ru/ICCC" TARGET="right">

Левый фрейм
МДКЦ
Назад
Правый фрейм
Код всего документа
<FRAMESET COLS="40%,*">
<FRAME SRC="test1.htm" name="left">
<FRAME SRC="test2.htm" name="right">
</FRAMESET>

атрибуты тага <FRAMESET> Ага! Понял, в чем дело? Атрибут TARGET просто говорит, во фрейм с каким именем загрузить ссылку. Кстати, если ты напишешь TARGET="_top", то ссылка откроется во всем окне браузера уже без фреймов. А TARGET="_blank" откроет ссылку вообще в новом окне.
Здесь я просто перечислю атрибуты, в том числе и те, которые уже рассматривались.
COLS - обеспечивает вертикальную разбивку фреймов
ROWS - обеспечивает горизонтальную разбивку фреймов
BORDER - задает толщину границы между фреймами (значение - число в пикселях.)
атрибуты для метки <FRAME> Тут текста будет уже побольше
SRC - задает путь до файла - источника фрейма (значение - полный/относительный путь)
NAME - определяет уникальное имя фрейма (значение - любое слово с использованием цифр)
NORESIZE - позволяет жестко зафиксировать фрейм, запрещает изменение размеров - удобная штука (значения нет)
SCROLLING - позволяет вставить полосу прокрутки (ScrollBar) во фрейм (значений всего три: YES - вставить, NO - не вставлять, AUTO - вставить по мере необходимости)
MARGINHEIGHT- задает вертикальный отступ содержимого фрейма от границы окна (значение - число в пикселях)
MARGINWIDTH - задает горизонтальный отступ содержимого фрейма от границы окна (значение - число в пикселях)
FRAMEBORDER- толщина границы данного фрейма (значение - число в пикселях)
Вот мы и добрались до блока <HEAD></HEAD>. Ты рад? Лично я - да, поскольку это завершающая тема этого краткого пособия.
В этом блоке размещается служебная информация о документе. Об одной конструкции ты уже знаешь (если, конечно, память у тебя не девичья) - это блок <TITLE></TITLE>. Здесь пишется текст, который в последствии появится в заголовке браузера.
Кроме этого, в заголовке обычно прописывается ряд так называемых META-конструкций. Эти страшные на слух MET"ы просто дают браузеру дополнительную информацию о твоем документе. Некоторые поисковые системы в Интернет используют функцию поиска "Robot". Она берет информацию о документе именно из МЕТА-конструкций. Ну что, посмотрим, что это такое?
МЕТА имеет три атрибута, которые используются парами - пока мы остановимся на первых двух:
NAME - название раздела (значение - текстовая строка). Вот некоторые из значений:
"Author", "Description" и "Keywords"
CONTENT - содержимое раздела (значение - текстовая строка не более 200 символов длиной)
Пример.
<META NAME="Author" CONTENT="Samoylov Sergey">
<META NAME="Description" CONTENT="HTML For Beginners. Simple and Funny.">
<META NAME="Keywords" CONTENT="HTML, HTML 4.0, tags, attributes, Internet, Web, learning, book">
Надеюсь, что из примера ясно применение пары NAME, CONTENT.
Теперь расмотрим другую пару HTTP-EQUIV, CONTENT.
HTTP-EQUIV - задает так называемые эквиваленты команд протокола передачи гипертекстов.. Каково звучит, а? Тебе уже страшно? Не бойся - давай просто посмотрим, на несколько примеров:
Пример 1.
<META HTTP-EQUIV"Content-type" CONTENT="text/html;charset=koi8-r ">
Данная МЕТА просто сообщает браузеру, что твой документ должен быть загружен в кодировке koi8. Если ты не знаешь, что такое кодировка, бегом дуй на кафедру "Интернет" или "Азы компьютерной грамотности".
Пример 2.
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://www.botik.ru/ICCC">
Здесь написано вот что: Если через 10 секунд после загрузки страницы пользователь не перешел никуда по ссылкам, то начнется загрузка документа http://www.botik.ru/ICCC.
Еще маленькая хитрость. Если после URL= написать путь до какого-нибудь звукового файла, то спустя наши 10 секунд начнется его проигрывание (при условии, что твой браузер поддерживает тип этого звукового файла).
 
Со времён людоедства нравы очень огрубели... 
Подставь правую ягодицу,когда тебя бьют по левой... 
Психически больная совесть... 
И многое другое в новой книге Михаила Маковецкого