20.12.09
Руководство по html

Относитетельная простота освоения и использования HTML (от английского Hyper Text Markup Language - язык разметки гипертекста)привела к тому, что HTML стал базовым для бурно развивающейся индустрии Web. HTML дает авторам следующие возможности:
- издавать сетевые документы с заголовками , текстом , таблицами , списками , фотографиями , и т.п.
- получать информацию из Сети через ссылки гипертекста по нажатию кнопки.
- создавать формы для посылки запросов на удаленные компьютеры, чтобы производить поиск информации, осуществлять бронирование, заказывать товары и т.п.
- включать электронные таблицы, видео клипы, аудио клипы, и другие програмные приложения непосредственно в их документы.
- и мпогое другое.

Это руководство составлялось в расчете на людей начинающих. Это не сухое изложение всего подряд, это попытка поработать на ассоциациях, сделать все более легко запоминающимся.

Инструментарий html

Итак, для начала создай на диске отдельную директорию (папку) для будущей страницы (порядок прежде всего:).

D:первые шаги

Теперь откроем блокнот (notepad) и скопируем туда следующий текст:


< html>
< head >
< title > Мой первый шаг < /title >
< /head >
< body >
Здравствуйте, это моя первая страница.
< br >
Добро пожаловать! :)
< /body >
< /html >



А теперь сохраним этот документ, присвоив ему имя *.html

D:первые шагиindex.html

Теперь откроем, допустим, Internet Explore (не закрывайте блокнот, он нам еще пригодится).

Файл - Открыть - кнопка Обзор - Наш документ (index.html).

Если мы чего-то изменили в нашем *.html документе (в блокноте), то, чтобы посмотреть как это выглядит в Internet Explorer, надо не забывать нажимать в IE (Internet Explorer) кнопку ОБНОВИТЬ (тоже самое касается других броузеров:) Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ:)

Посмотрим теперь, что у нас получилось, и разберемся как оно так получилось:)

-------------------------

Обязательные тэги


< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body >
Здравствуйте, это моя первая страница.
< br >
Добро пожаловать! :)
< /body >
< /html >



Первое, что нам нужно усвоить, что хтмл (html) это то, то мы сейчас изучаем. Второе, что нам нужно усвоить: Html не является языком программирования , он предназначен для разметки текстовых документов (т.е. для форматирования тескста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг).

Пример тэга: < br > (перенос текста на другую строку, что-то вроде Enter:). Попробуйте между тэгами Body его понатыкать - посмотрите, что получится:)

Т.е. все, что находится между < и > - это тэг. Текст, не находящися между такими скобками < > - весь виден, при просмотре в броузере.

Как мы видим на нашем примере тэгов много и они разные:). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги.


< html >

Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:

< /html >

И так всегда по умолчанию. Некоторые тэги, вроде < br gt;, не требуют закрывающего тэга. Но вернемся к нашему документу и рисунку.


< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body >

Здравствуйте, это моя первая страница.
< br >
Добро пожаловать! :)
< /body >
< /html >



< head > < /head > - голова документа
< body > < /body > - тело документа


Все тэги, расположенные между < head > < /head >, это что-то вроде служебной информации (наша служба и опасна и трудна, и на первый взгляд как-будто не видна:). Например < title > - заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд выше всех командных строк (на заголовок окна)... Увидели?:)

Все тэги, расположенные между < body > < /body > - непосредственное содержание документа. Следущие несколько ступенек будут посвящены именно этим тэгам: мы узнаем как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом:)

----------------------

Цвет текста

На этой ступеньке мы будем учиться раскрашивать:) Для начала нам нужна будет палитра

Все цвета прописываются следующим способом.

Например белый цвет - ffffff

Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.

< font color="#CC0000" > Добро пожаловать! :) < /font >

Теперь попробуйте вместо СС0000 поподставлять другие значения цветов.

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body >
Здравствуйте, это моя первая страница.
< br >
< font color="#CC0000" > Добро пожаловать! :) < /font >
< /body >
< /html >

Тэг < font > < /font > - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже.

Как же еще задавать цвета в документе? - вспомним об открывающем теге :

< body text="#336699" >

Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали < font > < /font > (если цвет в не задавать, то по умолчанию он будет черным).

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" >
Здравствуйте, это моя первая страница.
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :)
< /body >
< /html >

Со цветами для текста мы разобрались, теперь подумаем о фоне.

------------------------------

Цвет фона

На этой ступеньке мы узнаем, как изменять цвет фона документа, и поговорим немного об этике.

Цвет фона устанавливается в уже нам знакомом тэге < body > :

< body bgcolor="#000000" >

Для наглядности я прописала черный цвет, вы же свой документ можете расскрасить любым другим (если цвет в < body > не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше уж прописывайте цвет фона в body).

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
Здравствуйте, это моя первая страница.
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :)
< /body >
< /html >

Обратите внимание: мы одновременно можем прописать в теге < body > и цвет текста в документе, и цвет фона (это на всякий случай, если вы еще не поняли:).

< body text="#336699 bgcolor="#000000" >

С теоретической частью на данной ступеньке мы покончили, теперь присядем и немного поговорим о цветах. Нет, не тех, которые растут в лесах, полях, оранжереях, а о цветах документа.

Я хочу попросить тебя, мой дорогой спутник не злоупотреблять яркими фонами (желтым, красным, салатовым, ну, и черным с яркой смесью текста на нем). Почему? Да, просто пожалей глаза своих друзей, знакомых и случайного посетителя. Не следует также употреблять слишком много различных цветов на твоей странике, это, как и яркий фон, отвлекает от содержания, мешает прочтению и высталяет тебя самого в не лучшем свете.

Пример: Девочка в ярко-розовых джинсах и противном салатовом топике с надписью Kiss me, безусловно, привлечет внимание, но надолго ли? Не уподобляйтесь такой девочке:).

-------------------------

Параграфы и расположение текста

В этой главе мы поговорим о параграфах. Параграфы вводятся тэгом:

< p > < /p >

С помощью параграфов мы можем центрировать текст:

< p align="center" > текст < /p >

С помощью параграфов мы можем выровнять текст по левому краю:

< p align="left" >текст < /p >

Или по правому краю документа:

< p align="right" > текст < /p >

Теперь введем параграфы в наш документ и посмотрим наглядно, что получится (в наш пример я подставила параграф с параметром центрирования текста (center), попробуйте подставить в параграф другие параметры со значениями Left или Right).

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< p align="center" >
Здравствуйте, это моя первая страница.
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /p >
< /body >
< /html >

Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг
для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный < p align="center" >:

< center > текст < /center >

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
Здравствуйте, это моя первая страница.
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< /body >
< /html >

Все было бы хорошо, и можно было бы шагнуть на следущую ступеньку, если бы у тэга < p > не существовало бы еще и четвертого, но опасного значения (атрибута):

< p align="justify" > текст < /p >

Это мой любимый атрибут параграфа, он выравнивает текст по обоим краям документа, и все становится милым и аккуратным. Почему же это опасный атрибут? Да не работает он в старых версиях броузеров, поэтому у тех, кто использует старые броузеры, он может не дейcтвовать (не отображаться), и вся красота-ляпота да аккуратность сойдет на нет (т.е. текст выровняется в таком случае по левому краю документа). Тем не менее я атрибутом justify злоупотребляю:)

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
Здравствуйте, это моя первая страница.
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг? :)
< /p >
< /body >
< /html >

Я тут за вас набросала примерный текст вступления (вы придумаете, конечно, что-нибудь свое). Теперь вставьте пример в наш документ и посмотрите за что я так люблю justify:)

Посмотрели? - Шагаем дальше.

-----------------------------------

Заголовки и размер текста

В этой главе мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга < font > < /font >

Итак, мы уже немного умеем форматировать текст, но посмотрите на наш документ. Мне кажется, что фраза "Здравствуйте, это моя первая страница" так и просится, чтобы ее выделили. Для этого можно использовать заголовки:

< H1 > текст < /H1 >

< h2 > текст < /h2 >

< H3 > текст < /H3 >

< H4 > текст < /H4 >

< H5 > текст < /H5 >
< H6 > текст < /H6 >

 

 

 

 

 

Пришлось немного пожертвовать красотой, чтобы сразу наглядно все продемонстрировать. Зато всем видно и то, что существуют шесть уровней заголовков, и то, что соотвественно буковки у каждого разного размера, и то, что тут у нас такая же ситуация как с параграфами (принудительный перенос строки). Да, заметьте, заголовок выделяется жирным текстом, это тоже одно из его свойств, очень удобно:)

В пример я ввела заголовок третьего уровня < H3 > < /H3 > (мой любимый размер:). Смотрите, что получилось.

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000"> Добро пожаловать! < /font > :) < /center >
< p align="justify" >
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)
< /p >
< /body >
< /html >

Заголовки предназначены для выделения небольшой части текста (строки, фразы), НО, если вы хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то как быть? С заголовками такое не пройдет, поэтому вспомним о тэге < font > < /font > :
< font size="+4" > текст < /font >
< font size="+3" > текст < /font >
< font size="+2" > текст < /font >
< font size="+1" > текст < /font >
< font size="+0" > текст < /font >
< font size="-1" > текст < /font >
< font size="-2" > текст < /font >

Опять пришлось пожертвовать красотой:) Итак, параметр size задает размер шрифта, но, в отличие от заголовков, текст не выделятеся жирным шрифтом (о курсиве, жирном шрифте и т.п поговорим позже) и нет принудительного переноса.

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < font size="+1" > еще один виртуальный друг? :) < /font >
< /p >
< /body >
< /html >

В нашем примере я выделила слова "еще один виртуальный друг?", пусть все думают, что вы горите желанием завести еще одного виртуального друга:)

Прежде, чем мы двинемся дальше, хочу предупредить, что есть такая опасная болезнь у дизайнеров, как гигантомания. Ее симптомы: непомерно большие размеры шрифта, гигантские кнопища на пол экрана, вместо маленьких и милых кнопочек, и толстый (жирный) во всех случаях текст. Поэтому напоминаю: стандартный size (по умолчанию) ="+0".

Фух:) топаем дальше.

--------------------------------

Оформление шрифта

Теперь настала пора поговорить о том как делается курсив, подчеркнутый текст, полужирный текст и фиксированный текст:

< b > Полужирный текст < /b >
< i > Наклонный текст (курсив) < /i >
< u > Подчеркнутый текст < /u >


Тут все просто, можете их сами понатыкать, где хочется для пробы, а в примере я снова помучаю виртуального друга:

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b >
< /p >
< /body >
< /html >

Теперь пара строк о фиксированом шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой ширины, оттого и зовется фиксированным. А тэг для него следующий:

< tt > fixed - фиксированный шрифт < /tt >

В наш пример я его вводить не буду (сами, если хотите), т.к. пример наш и так фиксированным шрифтом выделен.

 < pre >  текст     (куча пробелов)     текст  <  /pre > 

Текст между < pre > и < /pre > тоже фиксированный, но тут есть одна большая особенность, он не только фиксированный, но еще и выводится с точностью до пробела так, как вы его набили в блокноте, сей странный тэг может быть полезен, допустим, для форматирования стихотворений, не злоупотребляйте им, т.к. он коварный и противный:)

Запомните, к одному фрагменту текста может применятся сразу несколько тэгов:

< tt > < b > < i > текст < /i > < /b > < /tt >

В нашем примере текст фиксированный, полужирный и курсивный (вот так-то:), так что не бойтесь использовать различные комбинации тэгов, эксперементируйте, но с умом:)

Хочу прежде, чем мы перейдем к картинкам, также упомянуть об одном интересном атрибуте тэга < font > :

< font face="ARIAL" > текст (шрифт Arial) < /font >

С помощью атрибута face в нашем примере я задала шрифт Arial. Таким образом вы можете задать и какой-нибудь экзотический шрифт для своей страницы, но это немного рискованно, т.к. у вашего посетителя может не оказаться такого шрифта, поэтому все же лучше задавайте стандартные (Arial (без надсечек), Times Roman (пропорциональный), Courier (равноширинный) и другие).

Все-все, теперь идем рисовать:)

--------------------------------

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

Сядем, отдохнем, поговорим о планах на будущее: как рисовать, как пользоваться графическими редакторами я вас учить не буду, я только посоветую вам Adobe Photoshop и Image Styler 1.0, т.к. именно этими двумя я в основном и пользуюсь.

Пока мы все еще сидим, я себе позволю немного почитать тебе мой спутник нравоучения. Запомни, страница (сайт) не должна представлять из себя супер графического изыска, который весит сотни килобайт, т.к. это жестоко, ни одна живая душа не выдержит подобной пытки (грузить долго). Вот, например, эта страница, содержание которой ты тщательно изучаешь) весит в картинках не более 6 килобайт (это общий вес всех картинок, а не вес каждой).

Также я посоветую не изощряться с анимированными картинками (они отвлекают внимание от содержания странички, а анимированная картинка не к месту смотрится как золотое колье на немытой шее - нелепо).

Теперь я с чистой совестью поведаю, как вставлять картинки в документ:

< img src="my.jpg" >

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так:

< img src="/my/my.jpg" >

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

< img src="../my.jpg" >

Если картинка лежит на другом сайте, то путь прописывается полностью:

< img src="http://www.homepage.ru/my/my.jpg" >

Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:)

Если у вас нет на данный момент картинки, то сохраните эту (жми на ссылку) у себя в директории с нашей страничкой. В нашем примере я использую именно ее (запомните тэг img не требует закрывающего тэга).

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< img src="primtocodephoto.gif" > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b >
< /p >
< /body >
< /html >

Посмотрите, что у нас получилось. Не очень симпатишно, не так ли? Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга < p > - < p align="justify" > . Параметр align есть и у картинок:

< img src="pr1.png" align="left" >

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right:

< img src="pr1.png" align="right" >

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - < img src="pr1.png" align="bottom" >
(2) - < img src="pr1.png" align="middle" >
(3) - < img src="pr1.png" align="top" >

Кроме параметра align существует еще несколько параметров:

(1) - < img src="pr1.png" Vspace="10" >
(2) - < img src="pr1.png" Hspace="30" >
(3) - < img src="pr1.png" alt="моя фотография" >
(4) - < img src="pr1.png" width="100" >
(5) - < img src="pr1.png" height="200" >
(6) - < img src="pr1.png" border="5" >

Теперь последуют обяснения по пунктам.

(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.

(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.

(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире).

(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать.

Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следущие параметры для нашей картинки:

< img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" >

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. < br > < br > А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b > < br > < br > На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) < br > < br > Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
< /p >
< /body >
< /html >

Советую вам прежде, чем двинуться дальше, поподставлять и другие параметры в наш пример, задавать разное значение в пикселях и так далее - это вам поможет лучше усвоить, все-таки тема большая и уже не такая простая:)

Вот мы узнали о том, как расположить текст относительно картинки (+ еще несколько нужных параметров), но мы не говорили как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, картинки как и текст можно расположить при помощи параграфов ( < p > < /p > ), это наглядно представлено в нашем примере.

Да, чуть не забыла сказать о том, что картинку можно сделать фоном документа. Это безобразие прописывается в открывающем тэге боди:

< body text="#336699" bgcolor="#000000" background="ваш_фон.jpg" >

Параметр Background и указывет на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ.

Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.

Если вы достаточно поигрались с параметрами картинок, то продолжим наше обучение.

----------------------------------

Ссылки

Теперь пора поговорить о ссылках. Наша страничка может состоять из нескольких документов. Один из них главный (index.html или main.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете.

Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

Ссылкой на эти другие документы (части нашей страники) может быть текст (фраза,слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточное знание. Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

< a href="prf.html" > посмотреть мои фотографии < /a >  

Тэг < a > < /a > делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками:

(1) - < a href="prf.html" > мои фотографии < /a >
(2) - < a href="/photos/prf.html" > мои фотографии < /a >
(3) - < a href="http://www.homepage.ru/prf.html" > мои фотографии < /a >

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди:

< body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999" >

Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Итак пропишем цвета для ссылки и саму ссылку в нашем документе:

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли < a href="prf.html" > посмотреть мои фотографии < /a > , почитать обо мне, черкнуть пару строчек в мою гостевую книгу. < br > < br > А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b > < br > < br > На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) < br > < br > Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
< /p >
< /body >
< /html >

Ничего хитрого. Тeперь нам следует запомнить то, что ссылка на ваш почтовый ящик прописывается так:

< a href="mailto:pochta@mail.ru" > pochta@mail.ru - пишите письма < /a >

Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик - другое (да, но цвета всех ссылок в документе одинаковые:).

Как я уже упоминала, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:

< a href="prf.html" > < img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > < /a >

Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png:

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< a href="prf.html" > < img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > < /a > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли < a href="prf.html" > посмотреть мои фотографии < /a > , почитать обо мне, черкнуть пару строчек в мою гостевую книгу. < br > < br > А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b > < br > < br > На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) < br > < br > Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
< /p >
< /body >
< /html >

Теперь посмотрите в Explorer, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"

< img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" border="0" >

Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то это зря вы так:)

Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делается? Да все по тому же принципу:

< a href="http://www.melody.ru/music.mp3" > скачать песню < /a >

Если адрес указан таким способом:

< a href="http://www.melody.ru/" > музыкальный сайт < /a >

То это означает, что в указаном каталоге есть файл вроде index.html, который загрузится по умолчанию.

Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда жмешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):

< a href="big.jpg" > < img src="small.jpg" > < /a >

В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга < a > < /a > есть параметр target:

< a href="big.jpg" target="_blank" > < img src="small.jpg" > < /a >

Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера (Explorer`а). В наш большой пример я это вводить не буду. Т.к. не хочу заводить большие картинки на сайте, и т.к. вы должны уже сами все подставлять и сами эксперементировать:)

Вот мы уже почти одолели первый лестничный пролет. Осталось еще несколько ступенек, на которых мы ознакомимся с тэгами нужными, но менее часто употребляемыми, чем тэги, которые мы уже изучили.

--------------------------------

Списки

Вот мы добрались и до не очень часто используемых тэгов. Как же так? - возмутится бедный мой спутник - А таблицы? А фреймы? - Ну, это темы других лестничных пролетов, а мы еще и первого не одолели:) Теперь, когда я вас порадовала этим фактом, продолжим обучение:)

Я думаю: самая пора поговорить о списках. Что такое списки? Это лучше демонстрировать на наглядном примере:

  • Текст один
  • Текст другой
  • Текст сякой
  • Текст эдакий


  • Скорее всего вы с этим сталкивались. Все это удобно в определенных ситуациях. В каких? Загляните, например, Оглавление и увидите:)

    Теперь разберемся, какими же тэгами обозначаются списки:

     

     

     

    < li > Текст один < /li >
    < li > Текст другой < /li >
    < li > Текст сякой < /li >
    < li > Текст эдакий < /li >

    Да-да, вcе опять оказалось очень простым:) Именно тэгом < li > < /li > они и задаются. Возникает вопрос: можно ли помимо закрашенного кружочка поописать еще чего-нибудь подобное?

  • По умолчанию - (1)
  • Полый кружок - (2)
  • Не будь таким квадратным - (3)


  • У тэга < li > есть параметр type:

    В случае (1) - < li type="disk" > ,
    в случае (2) - < li type="circle" > ,
    в случае (3) - < li type="square" > .


    Это один из вариантов. Если вы пользовались текстовыми редакторами (допустим Вордом), то бы знаете, что такое Табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается в право). Похожая фунция есть и в хтмл:

    < ul > Ваш текст < /ul >

    Чтобы отступ (табуляция) был больше надо вкладывать тэг < ul > в самого себя:

    < ul > < ul > Два отступа < /ul > < /ul >
    < ul > < ul > < ul > Три отступа < /ul > < /ul > < /ul >


    Зачем я завела разговор об этом тэге, вместо того, чтобы рассказать о том, что еще можно сделать со списками? Хм:) ну, у меня все со злым умыслом:

    • Сдвиг один
    •  
      • Сдвиг другой
    •  
      •  
        • Сдвиг сякой

    Хочу обратить ваше внимание, что это прописано без параметра type, но при помощи тэга < ul > :

    < ul > < li > Сдвиг один < /li > < /ul >
    < ul > < ul > < li > Сдвиг другой < /li > < /ul > < /ul >
    < ul > < ul > < ul > < li > Сдвиг сякой < /li > < /ul > < /ul > < /ul >

     

     

     

    Я думала, что глава о списках получится короткой, но как видите ошиблась:). Если не устали, то переходите к следущей ступеньке, если устали, то отдохните чуток.

    ------------------------------

    Линии

    В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом < Hr > и не требует закрывающего тэга:


     

    Вот такая она, в форме канавочки. У линии есть много разных параметров:

    (1) < Hr align="right" > (center или left)
    (2) < Hr width="30%" > (ширина линии в процентах/пикселях)
    (3) < Hr size="6" > (толщина линии)
    (4) < Hr NoShade > (отмена объемности)
    (5) < Hr color="cc0000" > (цвет линии, только в IE)

    Выглядит все это так - Первый (1):



    Второй (2):

    Третий (3):

    Четвертый (4):

    Пятый (5):


    Вот и вся премудрость с линиями. Естественно, эти параметры могут употребляться одновременно.

    Не злоупотребляейте параметром Color, т.к. он действует только в Интернет Иксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия:). О параметрах картинок говорится в главе 10).

    Не считайте линию изжившей себя, я думаю как элемент дизайна она может быть вполне полезной.

    У нас осталась еще одна главка, после которой мы перейдем к таблицам.

     

     

     

    -------------------------------

    Спецсимволы

    Эта глава о спецсимволах. Они не так часто употребляются, но тем не менее они необходимы:

    (1) - < - <
    (2) - > - >
    (3) - " - "
    (4) -   - пробел
    (5) - & - &


    Т.к. все заключенное между < и > броузер воспринимает как тэг, то , чтобы ввести символ скобки в текст для него придумали спецсимвол (1 или 2). Теперь вы знаете на какой мучение я была обречена, когда начала писать это руководство, ох уж эти примеры:)

    Кавычка (3). В принципе не обязательно ее так прописывать, броузеры понимают этот значок прекрасно, но кто знает: береженного - бережет.

    Символ пробела (4). Зачем он нужен? Ну, допустим вам понадобилось пять пробелов подряд, а тэг < pre > с его принудительным переносом строки вам вовсе не нужен, вот тогда поймете, ведь спецсимвол пробела можно написать хоть тысячу раз:).

    Но тут существует одно но:

    слово1 слово2 слово3 = слово1 слово2 слово3

    Ни одно из этих слов не перенесется на другую строку без двух других, и хотя посетитель увидит обычную фразу, где между словами стоит пробел, но по идее это же одно длинное слово, а не три, т.к.   - неделимый символ пробела:) - учтите и используйте с умом.

    И последний символ &, т.к. он несчастный используется для написания спецсимволов, то для него добрые люди тоже придумали спецсимвол & (бр..:).

    Спецсимволы не надо включать ни в какие тэги, надеюсь вы это поняли, считайте их просто текстом.

    Вот такая это сложная штука жизнь %)

    --------------------------------

    Таблицы

    Долго ли, коротко ли, но мы добрались до таблиц. Я полагаю, что мой спутник работал в Word и сталкивался с таблицами уже. Если так, то вы должны уже знать, что таблицы нужны для форматирования текста, а порой и не заменимы.

    Таблица задается тэгом:

    < table > < /table >

    Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.

    < tr > < /tr > - строчка таблицы
    < td > < /td > - столбец (ячейка) таблицы



    Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:


    < table >
    < tr > < /tr >
    < tr > < /tr >
    < /table >


    Сначала задаем строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):

    < table >
    < tr >
    < td > < /td >
    < td > < /td >
    < td > < /td >
    < /tr >
    < tr >
    < td > < /td >
    < td > < /td >
    < td > < /td >
    < /tr >
    < /table >


    Мой вам совет, для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть.

    Итак, теперь нам надо заполнить получившийся каркас:


    < table >
    < tr >
    < td > 1x1 < /td >
    < td > 1x2 < /td >
    < td > 1x3 < /td >
    < /tr >
    < tr >
    < td > 2x1 < /td >
    < td > 2x2 < /td >
    < td > 2x3 < /td >
    < /tr >
    < /table >


    Надеюсь мы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер столбца (1х2 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:

    1x1 1x2 1x3
    2x1 2x2 2x3

    Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца.


    < table >
    < tr >
    < td bgcolor="#FFCC33" > 1x1 < /td >
    < td bgcolor="#336699" > 1x2 < /td >
    < td bgcolor="#FFCC33" > 1x3 < /td >
    < /tr >
    < tr >
    < td bgcolor="#336699" > 2x1 < /td >
    < td bgcolor="#FFCC33" > 2x2 < /td >
    < td bgcolor="#336699" > 2x3 < /td >
    < /tr >
    < /table >


    Вот, что у нас получилось:



    Итак, как помнится мы решили с вами создать вот такую таблицу:


    А получилось у нас еще только вот такая таблица:

    В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).

    < table >
    < tr >
    < td height="35" width="50" bgcolor="#FFCC33" > 1x1 < /td >
    < td width="50" bgcolor="#336699" > 1x2 < /td >
    < td width="50" bgcolor="#FFCC33" > 1x3 < /td >
    < /tr >
    < tr >
    < td height="35" width="50" bgcolor="#336699" > 2x1 < /td >
    < td width="50" bgcolor="#FFCC33" > 2x2 < /td >
    < td width="50" bgcolor="#336699" > 2x3 < /td >
    < /tr >
    < /table >

    Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).

    Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).

    Вернемся к нашему примеру: теперь мы почти получили то, что хотели:)



    Теперь нам осталось лишь выровнять содержимое внутри таблицы:

    < table >
    < tr >
    < td height="35" width="50" bgcolor="#FFCC33" > < center > 1x1 < /center > < /td >
    < td width="50" bgcolor="#336699" > < center > 1x2 < /center > < /td >
    < td width="50" bgcolor="#FFCC33" > < center > 1x3 < /center > < /td >
    < /tr >
    < tr >
    < td height="35" width="50" bgcolor="#336699" > < center > 2x1 < /center > < /td >
    < td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
    < td width="50" bgcolor="#336699" > < center > 2x3 < /center > < /td >
    < /tr >
    < /table >

    И... готово!:)



    В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). И тэги, которые мы применяем для форматирования текста - все те же.

    Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке.

    В предыдущих главах мы научились создавать таблицы на конкретном примере, а в этой главе я хотела разом вывалить все оставшиеся возможности и аттрибуиы на ваши головы, но потом решила, что раз уж я пишу подробный учебник, то надо быть стойкой до конца:).

    Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим аттрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):



    Вот вам и наглядный пример, а теперь как это пишется:

    < table >
    < tr >
    < td height="35" width="50" bgcolor="#FFCC33" valign="top" > < center > 1x1 < /center > < /td >
    < td width="50" bgcolor="#336699" > < center > 1x2 < /center > < /td >
    < td width="50" bgcolor="#FFCC33" valign="bottom" > < center > 1x3 < /center > < /td >
    < /tr >
    < tr >
    < td height="35" width="50" bgcolor="#336699" valign="bottom" > < center > 2x1 < /center > < /td >
    < td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
    < td width="50" bgcolor="#336699" valign="top" > < center > 2x3 < /center > < /td >
    < /tr >
    < /table >

    Я прописала valign не для всех ячеек, только для тех, где я захотела чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование параметра valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было:).

    Теперь мы поговорим о параметрах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь чтобы было все понятно обратимся к примерам.



    В этом примере мы использовали параметр colspan=2, прописав его для ячейки 1х1. Код будет выглядеть следующим образом:

    < table >
    < tr >
    < td height="35" bgcolor="#FFCC33" colspan="2" > < center > 1x1 < /center > < /td >
    < td width="50" bgcolor="#336699" > < center > 1x2 < /center > < /td >
    < /tr >
    < tr >
    < td height="35" width="50" bgcolor="#336699" > < center > 2x1 < /center > < /td >
    < td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
    < td width="50" bgcolor="#336699" > < center > 2x3 < /center > < /td >
    < /tr >
    < /table >

    Прошу вас обратить внимание, на то, что параметр width для ячейки 1х1 в нашем примере не указан, если вас так тянет задавать этот параметр, то в нашем примере для ячейки 1х1 его надо было бы прописать равным 100 пикселям, т.к. все-таки ячейка 1х1 длинее других в два раза.

    И второе на что прошу вас обратить внимание, в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, т.к. ячейка 1х1 равна сама по себе двум ячейкам по длинне (что мы и указали параметром colspan). Если бы мы прописали ячейку 1х3, тогда у нас получилась бы такая ерунда:



    Теперь, когда мы разбрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же:



    Попробуйте сами написать код для такой таблицы (подсказываю, тут у нас должна исчезнуть ячейка 2х3). А для полного закрепления полученных знаний можете написать еще и код для такой таблицы (я не издеваюсь, просто вы так лучше усвоите):

    Итак, мы остановились на такой таблице:



    Давайте, подумаем, что же еще можно сделать с ней... хм... ну, например можно избавиться от пространства между ячейками таблицы:



    Такая красота достигается с помощью атрибута cellspacing, равного нулю:

    < table cellspacing=0 >
    < tr >
    < td height="35" bgcolor="#FFCC33" colspan="2" > < center > 1x1 < /center > < /td >
    < td width="50" bgcolor="#336699" rowspan="2" > < center > 1x2 < /center > < /td >
    < /tr >
    < tr >
    < td height="35" width="50" bgcolor="#336699" > < center > 2x1 < /center > < /td >
    < td width="50" bgcolor="#FFCC33" > < center > 2x2 < /center > < /td >
    < /tr >
    < /table >

    Можно наооборот увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:



    Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на наших примерах это смотриться не стандартно.

    Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign:



    Теперь зададим атрибут cellpadding=5:



    Вот теперь всем должно стать понятно, что такое пространство между содержимым ячейки и ее границами, и что делает тэг cellpadding. Сравним получившееся с предыдущей таблицей: мы прекрасненько видим, что у нас добавилось пространство по бокам, снизу и сверху, причем это пространство никакими картинками и текстом заполнено быть не может, как и пространство между ячейками, когда мы задаем cellspacing.

    Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):

    < table cellpadding=5 >
    < tr >
    < td height="35" bgcolor="#FFCC33" colspan="2" valign="top" > < center > 1x1 < /center > < /td >
    < td width="50" bgcolor="#336699" rowspan="2" valign="top" > < center > 1x2 < /center > < /td >
    < /tr >
    < tr >
    < td height="35" width="50" bgcolor="#336699" valign="bottom" > < center > 2x1 < /center > < /td >
    < td width="50" bgcolor="#FFCC33" valign="bottom" > < center > 2x2 < /center > < /td >
    < /tr >
    < /table >
    -----------------------------------

    Вложенные таблицы

    Когда мы учились делать таблицы, то я упоминала о вложенных таблицах. Что же это такое и в чем их особенность? - это обычные таблицы, которые располагаются в ячейках другой таблицы, и больше ничего особенного в них нет... почти.

    Допустим у нас уже есть большая таблица, две колонки которой забиты текстом какого-то отчета, а третья между ними для красоты:

    С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.   Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:

    буки 65% населения
    бяки 20% населения
    др. 15% населения


    За сим все

    Итак, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу. Теперь код:

    < table >
    < tr >
    < td width="200" valign="top" background="blue.gif" align="center" > С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете. < /td >
    < td width="10" background="white.gif" >   < /td >
    < td width="200" valign="top" background="blue.gif" align="center" > Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:
    < br > < br >

    < table cellspacing="3" >
    < tr >
    < td width="50" background="white.gif" > буки < /td > < td background="white.gif" > 65% населения < /td >
    < /tr >
    < tr >
    < td width="50" background="white.gif" > бяки < /td > < td background="white.gif" > 20% населения < /td >
    < /tr >
    < tr >
    < td width="50" background="white.gif" > др. < /td > < td background="white.gif" > 15% населения < /td >
    < /tr >
    < /table >


    < br > < br >
    За сим все < /td >
    < /tr >
    < /table >

    Увы, код получился объемный, но зато в нем нет ничего сложного: вложенная таблица от обычной ничем не отличается.

    Но все же здесь есть некоторые нюансы, на которые следует обратить внимание: background="картинка.gif" - раньше мы говорили о параметре bgcolor, который задает цвет фона для таблицы (ряда, ячейки), а параметр background задает фоновую картинку для таблицы (ряда, ячейки).

    А теперь сам нюанс: вроде было бы логичнее прописать просто белый фон для вложенной таблицы (bgcolor="#ffffff"), а не мучаться, создавая просто белую картинку и делая ее фоном (background="white.gif"), ведь так оно быстрее. Да, быстрее, но дело в том, что если IE (Internet Explorer) отображает параметр bgcolor для вложенных таблиц, то NN (Netscape Navigator) этот параметр для вложенных таблиц отказывается отображать, поэтому приходиться идти обходным путем, используя background.

    Вот так мы и убили двух зайцев сразу: узнали, что можно задать background для таблиц, да при этом ознакомились с некоторыми тонкостями ремесла :). Теперь будем добивать оставшихся заек:

    < td width="10" background="white.gif" >   < /td >

    Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку мы ввели для красоты. Чтобы ячейка не пустовала, в нее введен   (символ неразрывного пробела). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: < td > < /td > . Вот такую конструкцию NN просто напросто игнорирует, т.к. не любит пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или  , или мелкую картинку 1х1 пикселов.

    И последняя зайка: align="center" (right, left). Помните, мы уже говорили о параметре align, так вот, как видите, его можно задать для содержимого ячейки (см. наш пример), только вот удобного align="justify" тут нет.

    -----------------------------------

    Рамки

    В этой последней главе, посвященной таблицам, мы поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям:

    < table border="3" >

    Остальную таблицу допишете сами. Выглядеть это будет вот так:
    таблица с рамкой

    Нашей рамке мы можем задать цвет. Пусть он будет черный в нашем примере:

     

     

    < table border="3" bordercolor="#000000" >

    таблица с рамкой

    Вот и вся премудрость. В руководствах и справочниках вы можете встретить параметры bordercolorlight и bordercolordark - эти параметры понимает только ИЕ (Internet Explorer), поэтому не рекомендую их употреблять. Вобще-то не так трудно создать таблицу, гораздо труднее, чтобы это выглядело под разными броузерами одинаково. Возьмем те же рамки:

    Различные таблицы в IE

      Различные таблицы в NN

     

    Полагаю это достаточно наглядный пример (есть над чем задуматься).

    Я советую по возможности проверять, как выглядит ваш документ под разными броузерами и разрешениями, т.к. при этом могут проявиться такие дефекты, о которых вам доселе было неведомо. Конечно, можно махнуть рукой на пользователей NN (и прочих подобных), и радоваться тому, что в ИЕ выглядит все как надо, но это лишь свидетельствует о невысоком уровне кодера (верстальщика).

    Ну, уж если вы можете махнуть рукой на тех, кто не желает использовать ИЕ, то вот на то, что у разных пользователей разное разрешение экрана вы не должны забивать. Для тех кто не знал: два самых используемых разрешения - 800x600 и 1024x768.

    Никогда не стоит забывать о том, что вашу страницу могут смотреть под бОльшим или меньшим разрешением, и что нет абсолютной гарантии, что вы настолько мастерский верстальщик и в этом случае ваши таблицы не поедут куда-нибудь, например, к бабушке черта (да-да, сколько раз говорилось, сколько написано об этом, а толку практически никакого, интересно почему многие не желают этого понимать).

    Собственно это все о таблицах.

     

     

     

    ------------------------------

    Фреймы

    Вот мы добрались и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам открыть в окне броузера - не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).

    Это можно использовать по разному: некоторые дизайнеры при помощи фреймов воплощают свои сумашедшие задумки и повергают в восхищение публику, некоторые используют фреймы, потому что их сайту просто не возможно без фреймов обойтись, а некоторые используют фреймы, потому что им так удобнее - это все хорошо, главное, чтобы оно не смотрелось ужасно и некрасиво и было удобно для вашего посетителя .

    Итак, для того, чтобы наш любимый броузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем сколько документов откроется в одном несчастном окне броузера, сколько места будет занимать каждый, каким образом они будут располагаться (не все так просто, как хотелось бы:).

    Т.к. первый документ на сайте, который показывается посетителю это index.html (или вроде него), то мы его и будем мучать, пусть он будет фрейм-документом. Создадим документ index.html:

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < /head >
    < /html >

    На первый взгляд - вполне стандартное начало, только вот... опа! нет тэга body! И это не ошибка, фрейм-документ не содержит тэга body, такого обязательного в других случаях.

    Что ж, не будем грустить о тэге body, и найдем ему вполне достойного заместителя:

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset > < /frameset >
    < /head >
    < /html >

    Здравствуйте Frameset, какое красивое имя, говорят, что вы решили изменить кое-что в жизни нашего сайта и ввести фреймы :), очень приятно, мы всегда рады новым и практичным решениям.

    Теперь надо найти frameset достойных помощников и задать ему некоторые жизнено необходимые параметры.

    Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе.

    Расположить мы можем это по разному, вот для примера четыре варианта из множества возможных:



    Итак, сначала создадим такой вариант:

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset rows="100,*,150" >
    < frame src="logo.html" >
    < frame src="content.html" >
    < frame src="menu.html" >

    < /frameset >
    < /head >
    < /html >

    Теперь мне следует объясниться...

    Начнем с параметра rows - в нашем примере это выглядит так: rows="100,150,*" - а если перевести, то мы получим следующее - "... наш документ делиться на несколько рядов (строк). Высота первого ряда - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство", - полагаю, здесь должно быть все ясно.

    Тэг frame сообщает броузеру какие же документы у нас будут в каждом ряду (строке). В нашем случае: первый ряд - logo.html (документ с логотипом), второй ряд - займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset rows="100,*,150" >
    < frame src="logo.html" >
    < frame src="menu.html" >
    < frame src="content.html" >

    < /frameset >
    < /head >
    < /html >

    Посмотрите что у нас получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения параметру rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset rows="100,150,*" >
    < frame src="logo.html" >
    < frame src="menu.html" >
    < frame src="content.html" >
    < /frameset >
    < /head >
    < /html >

    Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется...

    Эту главу мы начнем с небольшого фокуса: замените параметр rows, на cols -

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset cols="100,150,*" >
    < frame src="logo.html" >
    < frame src="menu.html" >
    < frame src="content.html" >
    < /frameset >
    < /head >
    < /html >

    Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства :)

    Параметр cols делит окно нашего броузера не на ряды, а на колонки. Давайте переведем это - cols="100,150,*": "...наш документ теперь делится на колонки. Первая колонка имеет ширину - 100 пикселов, вторая - 150, а третья занимает все оставшееся место".

    Кстати, мы получили еще один из четырех вариантов, которые собирались сделать:



    Итак, подведем итоги. Мы можем делить окно нашего броузера либо на ряды, либо на колонки, с помошью параметров тэга < frameset > Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.

    При помощи rows мы разбиваем окно на ряды и задаем какую высоту будет иметь каждый ряд, при помощи cols разбиваем окно на колонки и задаем какую ширину будет иметь каждая колонка.

    Кстати, ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:

    < frameset cols="10%,15%,75%" >

    Помните, что в сумме это все должно равняться 100%. А то бывают же умники...

    Разберемся, как расположить документы в окне следующим образом:

    или

    В предыдущей главе я сказала, что мы можем делить окно только на ряды или колонки. Тогда как же расположить наши документы в окне так, как указано на рисунках? А разве я говорила, что ряд в свою очередь нельзя разбить на несколько колонок, а колонку на несколько рядов? Нет, не говорила :Ъ.

    Начнем с первого рисунка:



    Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на две колонки, в которых будут располагаться документы menu.html и content.html.

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset rows="100,*" >
    < frame src="logo.html" >
    < ??? >
    < /frameset >
    < /head >
    < /html >

    Принцип построения ясен, только вот как обозначить ряд, разбитый на две колонки? Тут нам поможет господин Frameset.

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset rows="100,*" >

    < frame src="logo.html" >
    < frameset cols="150,*" >
    < frame src="menu.html" >
    < frame src="content.html" >
    < /frameset >


    < /frameset >
    < /head >
    < /html >

    Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг < frameset > < /frameset > .

    С помощью параметра cols тэга < frameset > < /frameset > мы делим второй ряд на две колонки (первая шириной 150 пикселов, вторая по ширине занимает все оставшееся пространство). А тэги < frame > , которые содержит < frameset > < /frameset > определяют какие документы будут показаны в колонках (menu.html и content.html).

    Теперь разберем вариант, изображенный на втором рисунке:



    Здесь мы будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html (содержание), а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset cols="100,*" >

    < frameset rows="100,*" >
    < frame src="logo.html" >
    < frame src="menu.html" >
    < /frameset >
    < frame src="content.html" >

    < /frameset >
    < /head >
    < /html >

    Вот так. Ничего сложного здесь нет:)

    -----------------------------

    Параметры тэга frame

    Допустим, мы решили остановиться на последнем варианте, значит будем приводит это в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме с logo.html.

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset cols="100,*" >

    < frameset rows="100,*" >
    < frame src="logo.html" scrolling="no" >
    < frame src="menu.html" >
    < /frameset >
    < frame src="content.html" >

    < /frameset >
    < /head >
    < /html >

    Scrolling - параметр тэга < frame > . Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.

    Собственно, параметр scrolling="auto", можно не прописывать, т.к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.

    Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset cols="100,*" border="0" >

    < frameset rows="100,*" >
    < frame src="logo.html" scrolling="no" >
    < frame src="menu.html" >
    < /frameset >
    < frame src="content.html" >

    < /frameset >
    < /head >
    < /html >

    Так уже лучше :). Но все же, что-то еще хочеться исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset cols="100,*" border="0" >

    < frameset rows="100,*" >
    < frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0" >
    < frame src="menu.html" >
    < /frameset >
    < frame src="content.html" >

    < /frameset >
    < /head >
    < /html >

    Прижали. Теперь давайте познакомимся с параметрами тэга < frame > marginheight и marginwidth.

    Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрэйма, а marginwidth определяет ширину левого и правого полей фрэйма. В нашем примере мы избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth равное нулю.

    Теперь мы поговорим о том, что становится проблемой для каждого человека, начинающего осваивать фреймы.

    Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме. А нам бы надо сделать так, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?

    Для начала, господа, познакомьтесь с новым параметром тэга < frame > - name. Пустим name в дело:

    < html >
    < head >
    < title > Хождение по фреймам < /title >
    < frameset cols="100,*" border="0" >

    < frameset rows="100,*" >
    < frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0" >
    < frame src="menu.html" >
    < /frameset >
    < frame src="content.html" name="window-1" >

    < /frameset >
    < /head >
    < /html >

    Параметр name задает имя для фрейма (в нашем случае для того, который содержит документ content.html).

    Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью параметра тэга < a > target (target="имя_фрейма").

    Как это выглядит? Обратимся к документу menu.html.

    < html >
    < head >
    < title > Документ с Меню < /title >
    < body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff" >
    < center >
    < a href="content.html" > Главная < /a >
    < a href="tumki.html" > Тумки < /a >
    < a href="bumki.html" > Бумки < /a >
    < a href="tururumki.html" > Турурумки < /a >
    < a href="tra-la-la.html" > Траляля < /a >
    < /center >
    < /body >
    < /head >
    < /html >

    Вот такой он, в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).

    < html >
    < head >
    < title > Документ с Меню < /title >
    < body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff" >
    < center >
    < a href="content.html" target="window-1" > Главная < /a >
    < a href="tumki.html" target="window-1" > Тумки < /a >
    < a href="bumki.html" target="window-1" > Бумки < /a >
    < a href="tururumki.html" target="window-1" > Турурумки < /a >
    < a href="tra-la-la.html" target="window-1" > Траляля < /a >
    < /center >
    < /body >
    < /head >
    < /html >

    Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :).

    Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:

    < a href="project.html" target="_top" > Мой проект о рыбках < /a >

    Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).

    ----------------------------

    Стили шрифта

    Раньше мы говорили о разных способах выделения текста (курсиве, полужирном шрифте, подчеркивании и других).

    Какие же еще теги определяют стиль шрифта, используются для его форматирования? Это - Big, Small, Strike (или S), Sub и Sup.

    1) Big представляется крупным шрифтом, а Small малым шрифтом относительно основного текста:

    < small > Малый < /small >
    Нормальный текст
    < big > Большой < /big >

    2) Тэги Strike и S представляют текст перечеркнутым шрифтом:

    < strike > Перечеркнутый < /strike >
    < s > Перечеркнутый < /s >

    Какая разница между S и Strike? Да никакой. Просто один из них появился в более ранней спецификации, а другой в более поздней, но оба они имеют право на жизнь.

    3) Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодится? Ну, например при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:).

    Верхний индекс < sup > sup < /sup >
    Нижний индекс < sub > sub < /sub >

     

    --------------------------

    Обтекание объекта текстом

    Еще в самом начале обучения, в самых первых главах, я говорила о тэге Br, который осуществляет принудительный перевод текста на другую строку (т.е. аналогичен нажатию клавиши Enter, когда мы форматируем текст в обычном текстовом редакторе).

    В этой главе мы поговорим о параметре тэга Br - Clear. Зачем он нужен? Допустим текст обтекает какой-либо объект (например, картинку):

    А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам. "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

    Нам нужно, чтобы текст после слов "к моим гранитным ногам" обрывался, и "кушайте сами сосиски" - уже продолжалось под картинкой. Вы, конечно, можете ввести несколько тэгов br и решить эту проблему. Но если вдруг картинка (объект) будет большой, текста много, то тут вы уже явно не обойдетесь несколькими br, тут вам придется употребить их с десяток и больше. Так вот, чтобы вам не пришлось мучатся в таких ситуациях, и существует параметр clear:

    А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
    "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

    Теперь пример кода:

    < img src="clearpri.gif" align="left" >
    А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
    < br clear="left" >
    "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

    У параметра clear существует несколько значений - all, left, right.

    All - завершить обтекание объекта текстом. Left - завершить обтекание текстом объекта, выровненного по левому краю. Right - завершить обтекание текстом объекта, выровненного по правому краю.

    В нашем примере мы задали clear="left", т.к. наша картинка выровнена по левому краю.

    Вот и вся премудрость. Текст примера - это отрывок из стихотворения "Первый!" одного моего знакомого, который в виртуальной реальности величает себя Мирзавчиком, не имеет никакого отношения к нашему обучению, и упомянут лишь из уважения к авторскому праву.

    -----------------------

    Навигационные карты

    Мы уже говорили о картинках и том, как картинку сделать ссылкой. Вы, наверное, также знаете, что можно сделать так, чтобы при нажатии на разные области (части) одной и той же картинки, вы попадали на разные страницы, это называется - навигационная карта. Разговор о том, как создавать навигационные карты, растянется на несколько глав, но не пугайтесь, на самом деле это совсем не трудно.

    Сначала теория.

    Навигационные карты задаются тэгом Map. Тэг Map включает себя тэг(и) Area, которые определяют геометрические области внутри карты (в нашем примере это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).

    < map >
    < area ... >
    < area ... >
    ...
    < area ... >
    < /map >

    Дальше уже будем тренироваться на кошках :) (на конкретных примерах)

    Для начала нам нужна картинка. Возьмем такую:



    Картинка простая - всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, - это изображения каких-либо кнопок, а голубое - какой-то сложный фон. Чтобы не создавать сложную таблицу, вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще - создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками.

    Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг Area, естественно, при помощи своих параметров. Это параметры shape и coords.

    Параметр shape - определяет форму области (будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly")). Сейчас мы работаем с прямоугольной областью, поэтому:

    < map >
    < area shape="rect" >
    < /map >

    Параметр coords - определяет координаты (положение нашей геометрической формы). Число координат и порядок их значений зависят от выбранной нами формы.

    "Стоп! стоп!" - скажете вы, - "Какие координаты?" - Те самые, вспоминайте школу и уроки геометрии :)



    Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (0;0). Если мы работаем с прямоугольной областью, то нам нужны координаты верхнего-левого и нижнего-правого углов области. Порядок записи координат для параметра coords следующий:

    < area shape="rect" coords="x1,y1,x2,y2" >

    В нашем примере у прямоугольника №1 координаты такие:

    x1=25, y1=36, x2=114, y2=98

    Значит код будет выглядеть следующим образом:

    < map >
    < area shape="rect" coords="25,36,114,98" >
    < /map >

    Теперь пропишем, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам параметр href:

    < map >
    < area href="drugoy_document.html" shape="rect" coords="25,36,114,98" >
    < /map >

    Все бы хорошо, но этого все еще не достаточно, чтобы картинка стала ссылкой, нам нужно еще указать имя карты и связать ее с картинкой.

    У тэга Map есть параметр name - имя карты, давайте назовем карту - karta1:

    < map name="karta1" >
    < area href="drugoy_document.html" shape="rect" coords="25,36,114,98" >
    < /map >

    Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки:

    < img src="bluerects.gif" usemap="#karta1" >

    ... Куча текста и всякого содержания, или ничего...

    < map name="karta1" >
    < area href="drugoy_document.html" shape="rect" coords="25,36,114,98" >
    < /map >

    Смотрим результат (жмите на прямоугольник №1):



    Теперь сами пропишите Area для прямоугольника №2 для тренировки (x1=153, y1=11, x2=219, y2=127), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах.

    Для создания круглой области нам нужны будут координаты ее центра (x и y) и длинна радиуса (R) в пикселях. Т.е. порядок записи следующий:

    < area shape="circle" coords="x,y,R" >

    Давайте будет опять работать с геометрической областью №1. В нашем случае координаты для маленького круга будут такие: x=46, y=48; а длинна радиуса - R=35. Запишем:

    < map >
    < area shape="circle" coords="46,48,35" >
    < /map >

    Теперь, когда самое главное записано, пропишем имя карты, куда она ссылается и привяжем карту к рисунку:

    < img src="mapcircle.gif" usemap="#karta2" >

    ... Куча текста и всякого содержания, или ничего...

    < map name="karta2" >
    < area href="drugoy_document_2.html" shape="circle" coords="46,48,35" >
    < /map >

    Кстати, для карты мы можем прописать ALT для каждой области, сейчас у нас только одна область, но все равно, пропишем для нее ALT:

    < img src="mapcircle.gif" usemap="#karta2" >

    ... Куча текста и всякого содержания, или ничего...

    < map name="karta2" >
    < area href="drugoy_document_2.html" shape="circle" coords="46,48,35" alt="маленький круг" >
    < /map >

    Теперь при наведении на область №1 будет всплывать подсказка, что же это такое :)

    Давайте посмотрим результат (нажмите на первый круг):

    маленький круг

    Теперь вы самостоятельно сделаете ссылкой второй круг (x=158, y=75, R=53), чтобы закрепить пройденное.

    Вот мы, наконец, добрались и до многоугольников.



    Бу-бу-бу! :) Страшно?

    На самом деле тут нет ничего страшного. Вы указываете точки (координаты углов), они как бы соединяются, и мы можем получить очень разнообразные фигуры (посмотрите на фигуру 2, правда здорово?). Используя poly, мы можем делать самые разнообразные области, от скромного треугольника до шикарной звезды.

    Сейчас мы будем работать с фигурой №2, потому что у нее меньше углов (да, ленивая я, решила облегчить себе жизнь на один угол:).

    Для начала зададим тип области:

    < map >
    < area shape="poly" >
    < /map >

    Координаты пишутся по следующему принципу:

    < area shape="poly" coords="x1,y1,x2,y2,...,xN,yN" >

    Расшифровывается это так: "координаты первого угла (x1,y1), координаты второго угла (x2,y2), еще много углов и их координат (...), координаты последнего угла (xN,yN)". Т.е. для нашего пятиугольника запись полностью будет выглядеть так:

    < area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5" >

    Теперь подставим реальные значения координат в наш код:

    < map >
    < area shape="poly" coords="168,9,232,29,200,97,223,129,153,119" >
    < /map >

    Дальше уже прописываем ссылку, имя карты, и привязываем карту к рисунку (это везде по одному и тому же принципу):

    < img src="mappoly.gif" usemap="#karta3" >

    ... Куча текста и всякого содержания, или ничего...

    < map name="karta3" >
    < area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119" >
    < /map >

    Теперь проверим, получилось ли у нас это безобразие (в этот раз вторая фигура, жмите):



    Не забудьте прописать самостоятельно первую область (шестиугольник) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

    Теперь я расскажу еще о нескольких нюансах и мы завершим наш разговор о картах:

    1 - Мы можем одновременно использовать разные области, например круг и многоугольник:

    < img src="mappoly.gif" usemap="#karta3" >

    ... Куча текста и всякого содержания, или ничего...

    < map name="karta3" >
    < area href="drugoy_document_3.html" shape="circle" coords="46,48,35," >
    < area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119" >
    < /map >

    2 - Наши области могут пересекаться (бывает, руки кривые). Это не смертельно, главное помнить, что в этом случае при нажатии на область пересечения приоритет имеет область, которая указана первой (т.е. пользователь пойдет на страницу, куда она ссылается).

    3 - Вы можете не мучаться с картами, а найти на просторах интернета специальную программу, с помощью которой вы без труда сможете карту расчертить, и не прописывать все вручную - это может сэкономить ваше время, силы, нервы.

     ©  программы и скрипты для создания сайта скачать бесплатно

    Перепубликация материалов,возможна только с устного или письменного разрешения Администрации сайта !

    Полная версия: http://gvmproject.info/article/read/rukovodstvo_po_html.html