|
||||
| Таги (теги, тэги) №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 ÌÄÊÖ <BODY BGCOLOR="#FFFFFF" TEXT="#000099" LINK="#00AA00" ALINK="#00FF00" VLINK="#006600"> <center>Hellcome to Well</center> <center><a href="http://www.botik.ru/ICCC">ÌÄÊÖ</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> Â áğàóçåğå 1 ñòğ. 1 ñòëá. 1 ñòğ. 2 ñòëá. 2 ñòğ. 1 ñòëá. 2 ñòğ. 2 ñòëá. Èñõîäíûé êîä <TABLE BORDER=1> <TR> <TD> 1 ñòğ. 1 ñòëá. </TD> <TD> 1 ñòğ. 2 ñòëá. </TD> </TR><TR> <TD> 2 ñòğ. 1 ñòëá. </TD> <TD> 2 ñòğ. 2 ñòëá. </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> Â áđàóçåđå Ñëèÿíèå 1 ṇ̃đ. 3 ṇ̃ëá. 2 ṇ̃đ. 3 ṇ̃ëá. 3 ṇ̃đ. 1 ṇ̃ëá. 3 ṇ̃đ. 2 ṇ̃ëá. 3 ṇ̃đ. 3 ṇ̃ëá. Èñơîäíûé êîä <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> Вот и все! Но обрати внимание: хотя в примере таблица нарисована с видимой границей, на самом деле границы не будет. И как же с этим бороться? Прочитай следующую часть. <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 секунд начнется его проигрывание (при условии, что твой браузер поддерживает тип этого звукового файла). |
