HTML

Погружение

HTML (часть 1)

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

Об этой книге
Несколько лет тому назад, когда я только-только вылез в сеть, я интересовался только играми, затем открыл для себя чаты, затем когда устал отвечать на одни и те же вопросы - решил сделать себе страничку, какие были у большинства тех, с кем я общался. Так я открыл для себя HTML. Я рассматривал странное содержимое скаченных на винт страниц, и постепенно бессмысленное нагромождение когда становилось мне более или менее понятным. На вникание в суть идеи мне потребовалось около недели, за которую я замучил вопросами всех к тому времени обретенных знакомых, кто хоть что-либо смыслил в создании страничек.
Затем я открыл для себя наличие в Сети множества сайтов, содержащих разной степени подробности уроки HTML и смежных тем. Но.. оказалось, что 99% этих сайтов писал не один автор, а множество, и писали они "отрывочно", т.е. как разными зачастую не очень вразумительными стилями, так и на урывочные темы. Некоторые очевидные для всех "продвинутых" вещи вообще почти нигде нельзя было найти - они передавались только устно, потому что никто не хотел писать о вещах "и так понятных". Еще одно неприятное открытие было в том, что всяк по своему видит "подробное" объяснение, и большинство "уроков" были понятны наверное только их авторам.
Вот потому я и решил слепить подробные, детально продуманные и включающие в себя ВСЕ (ну или большинство ;0) мне известные нюансы и тонкости.
Но дело это чрезмерно трудоемкое и отнимающее массу времени; времени, которое я мог бы потратить на зарабатывание себе денег. Поэтому дальнейшие книги, скорее всего, будут нести некоторое количество рекламы - когда найдется спонсор (ау, спооонсоор? писать сюда!), желающий порекламироваться на моих страницах. Смею надеяться это будут САМЫЕ ПОДРОБНЫЕ уроки, какие когда-либо попадали в Сеть, бесплатно. И главное, - много :0). Итак, переходим к собсно водным процедурам, то есть к изучению HTML.
Термины и понятия, использованные в книге
Броузер [browser] - программа, для просмотра выложенных в Сеть страничек. Является интрепретатором (т.е. "обработчиком команд") HTML.
Броузеров существует больше тридцати видов, но детального рассмотрения заслуживают только три - это доминирующий, но глючный Микрософтный
IE [Internet Explorer], в наши дни это 5.5 и 6 его версии. IE используют 85-90% от общей массы пользователей интернета .
Мозилла [Mozilla] (хотя у многих этот броузер ассоциировался с еще более кривым и глючным чем эксплорер броузером Netscape Navigator, получившим распространение в 5-7% упертых "альтернативщиков", это вовсе не так). Мозилла в наши дни - быстро совершенствующийся броузер, разработанный группой энтузиастов. Обладает кучей преимуществ перед любыми "примочками" к IE, любыми "альтернативными" броузерами типа Оперы и прочей глюкоманью. Хотя в силу консервативности большинства пользователей этот браузер и не получил (пока что!) широкой распространенности, но уже сейчас он по своим характеристикам превосходит все распространяемые на момент написания этой книги аналоги. Рекомендуется к использованию версия 1.2.1 как уже всесторонне проверенная. На горизонте уже 1.3. (но еще бета-версия с глючками) и 1.4. английская.
Опера - [Opera] - вечно глючный альтернативный броузер, "на все 100%" соответсвующий стандартам HTML, но почему-то очень странно эти стандарты понимающий. Тем не менее пользуется популярностью у довольно значительного процента Сетян, примерно 7-12% от общей массы. Броузер можено пользовать бесплатно, но вам будут навязывать их рекламу, или же он обойдется в 35 $. Претендует на роль самого быстрого броузера, но выигрывает в скорости (сравнивая с по-настоящему быстрейшим Мозиллой) жалкие несколько процентов - и то, за счет потери части кода и искажений на страницах.
Теги [tags] - это стандартизированная система обозначений и параметров, распознаваемых броузерами* и придающих HTML тот вид, который мы наблюдаем на страничках в Сети. Теги бывают "контейнерными", т.е. состоящими из двух частей, начала, т.е. отметки откуда применять указанные в теге параметры и закрывающей части, т.е. обозначения до куда заданные параметры действуют. Бывают теги и не требующие закрывающей части. Это к примеру теги переноса <br> или тег разделительной черты - <hr>.
Пиксел [pixel] - единица измерения, равная 1 точке экрана. Самая маленькая единица измерения и самая часто используемая.
По умолчанию [оно же default] - обозначает какие-то сами собой подразумевающиеся настроки-значения, которые будут установлены, если пользователь не укажет иные.
Наследование - большинство вложеных тегов "перенимают" некоторые параметры "старших" тегов, если таковые в них самих не указаны отдельно.
Мозилла - [Mozilla] - лучший броузер всех времен и народов. На порядок обходит абсолютно все, что у нас в Сети доступно. Программа продумана и удобна, бесплатна и переведена на русский. Сайт - mozilla.ru отслеживает обновления последних версий, а у меня на srez.ru в соответствующем разделе (см. левое меню) можно прочесть трактат про про него :0)
Хомяк - [homepage] - хомяк, хомепага, пага, домашка и т.п. - подразумевается домашняя страничка. т.е. личная.
Программы, которые нам понадобятся
Прежде всего это:
editpad.exe - заменитель блокнота (на мой взгляд самый лучший из аналогов)
DiscoCommander
TotalCommander
Far
- что-нибудь "синенькое" (достаточно одной программы. Это файловые менеджеры, которые нужны для одного и того же, и какой из них выбрать, зависит больше от личных вкусов и пристрастий.)
Также, неплохо c сайта производителя скачать DreamWeaver MX, про который будет отдельная книжка. Дример - это программа, которой создавались наверное не менее 50% сайтов Сети, а то и более. На мой взгляд, эта программа лучшая для быстрого и удобного создания полноценных проектов любого уровня и калибра. Очень советую. Кстати, лечилка к этой проге легко находится на большинстве софт-обзоров.
Вообще-то, программ, которые могут использоваться в процессе создания страничек, очень много - куда больше полусотни. Но писать про них всех я сейчас не стану. О каждой из них постепенно будет выпущена своя книжка с детальной "обучалкой" по программе.
Шрифт - это таблицы замены кода видимым изображением.
То есть собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:
Arial Ариал
Courier New Курьер Нью
Comic Sans Комик Санс
Times New Roman Таймс Нью Роман
Verdana Вердана
Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf
Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать - вам придется а) доставить этот файл пользователю, что, учитывая вес файла в 150-300 кб не пятисекундная задача, либо б) - ограничиться имеющимися,, заменив остальное лишь графикой, то есть картинками (советую соблюдать меру ;0)
Как в HTML придать шрифту тот или иной вид?
Тег, назначающий шрифт - <font>содержимое тега - то, на что повлияют параметры тега</font>
В это самое <font> мы сейчас и будем вставлять параметры.. Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется.
Итак:
размер шрифта - <font size="число от 1 до 7">
В дизайне обычно используются первые четыре размера. Все что выше - дурной тон и признак дилетанства, ибо занимает слишком много места, трудно читается и вообще некрасиво. Правда, и большим размерам найдется применение. Например, седьмым размером можно писать буквицу (первую букву начала главы):
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Если правильно подобрать размеры, смотрится вполне приятно.
Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это тегом face="название шрифта" (пример: face="Comic Sans MS")
Эти два тега - размер и вид шрифта, - можно расположить в любой последовательности в теге <font> - что
<font size="1" face="Comic Sans MS">текст</font>
что
<font face="Comic Sans MS" size="1">текст</font>
Главное тут - следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и >
Теперь, для лучшего понимания таких терминов как "контейнер",, "вложеный тег" и "наследование", рассмотрим ниже следующий пример:
<font face="Название шрифта" size="1">
<i>
< font size="4">Заголовок </font>
текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
</i>
< font size="4">Заголовок </font>
текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
</font>
Как видим из примера - вовсе необязательно каждый раз писать цвет, размер и имя шрифта. Все эти параметры "наследуются" младшими тегами, то есть теми, что вложены в другие. Разъясню. Пример выше словами: Задали имя шрифта, оно сохранится во всем пространстве, ограниченном тегами с именем.
Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст.
Так же в работе с текстом помогает и тег, обозначающий абзацы - это <p></p> - все помещенное в них отделяется сверху и снизу пробелом, и может иметь собственные параметры абзаца,, прописываемые прямо в теге - <p align="center">текст</p>.
Пробелы между выделением абзаца, являющиеся скорее недостатком, чем полезностью, можно убрать при помощи CSS, о котором будет отдельная глава.
Шрифт так же может быть наклонный, выделеннный, и жирный наклонный.
Достигается это тегами
<i>текст</i>
<b>текст</b>
и их сочетанием - <b><i> текст </i></b>
Сочетание вида м - <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других - "заорут". Поэтому советую писать правильно.
Собственно, вот полный список таких тегов и, заодно, как это выглядит в броузере:
<b>жирный шрифт</b>
<strong>жирный шрифт</strong> - (аналог <b></b>)
<i>наклонный шрифт</i> - (курсив)
<em>наклонный шрифт</em> - (аналог <i></i>)
<u>пАдчёркнутый шрифт</u>
<s>перечёркнутый шрифт</s>
<strike>перечёркнутый шрифт</strike> (аналог <s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
_{нижний индекс} и ^{верхний индекс}
<code>текст отображается как код или формула (чаще всего как шрифт Courier)</code>
<tt>текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>текст отображается моноширинным жирным шрифтом</kbd>
<var>отображение переменных (как правило - курсив)</var>
<cite>отображение цитат (как правило - курсив)</cite>
<address>так обозначается адрес (как правило, курсив) </address>
<blockquote>
Эта фича смещает весь абзац (заключенный в нее текст) на энный отступ слева - нужно для упрощения дизигна, чтоб не равнять таблицами или пробелами. Иногда очень облегчает жизнь :0)
</blockquote>
Попробуйте использовать и такое:
<blockquote><blockquote>
текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..
</blockquote></blockquote>
И , собственно, тег <br> - эта фича закрытия не требует.
Для тех кто в танке: </br> не пишем!
Это просто переход к следующей строке. чтобы, например, писать стихи в столбик:
Тщетны надежды и усилья,
гранит науки покусать,
не те уж зубы, руки, крылья,
ну что ж.. тогда хоть полизать.. ;0)
Кроме прочего стоило бы упомянуть такие теги как <H1></H>, но будучи вставлены в текст "по умолчанию", они непоправимо изуродуют дизайн. Посему, про них я напишу после рассмотрения CSS, ибо без серьезной "доводки" при помощи стилей теги эти неудобоваримы и бесполезны.
Списки.
Вместо того, чтобы нумеровать все вручную, вместо запарок с выделениями разного рода и калибра, намного проще воспользоваться малоизвестными, но поддерживаемыми всеми бродилками, тегами <UL> и <LI>:
как это выглядит: Код:
строка 1
строка 2
строка 3
<ul>
<LI>строка 1
<LI>строка 2
<LI>строка 3
</ul>
списки могут быть и вложенными:
как это выглядит: Код:
тема 1
подтема 1
подтема 2
подподтема
подтема 3
тема 2
<UL>
<LI>тема 1
<OL>
<LI>подтема 1
<LI> подтема 2
<OL start="10">
<LI> подподтема
</OL>
<LI> подтема 3
</OL>
<LI>тема 2
</UL>
Какой тег что означает?
UL - начало списка, /UL - закрытие списка
LI - тег, означающий строку списка. Если величина не задана (параметром value="число"), то по умолчанию имеет вид точки, если задано число - отсчитывает, прибавляя в начало каждой новой строчки, следующее число к заданному.
OL - тег начала нумерованного списка. Может иметь значение не с единицы, а с заданной величины - делается введением параметра start="число, с которого начать отсчет"
Декорировать списки можно разными значками. Делается это при помощи параметра type:
как это выглядит: Код:
тема 1
<UL>
тема 3
<UL type="circle">
тема 4
<UL type="square">
квадратик
тема 5
<UL type="disc">
(собственно, этот параметр ставится "по-умолчанию")
тема 1
тема 2
тема 3
<OL type="i" >
римские малые
тема 1
тема 2
тема 3
<OL type="I" >
римские заглавные
тема 1
тема 2
тема 3
<OL type="a" >
английские малые
тема 1
тема 2
тема 3
<OL type="A" >
английские заглавные
тема 1
тема 2
тема 3
<OL type="1" >
арабские цифры
Но вышеопиcанные премудрости с точками, кружочками и квадратиками сработают и если просто установить тег в двойном экземпяре - то есть <ul><ul><li> содержимое </ul></ul></li> тогда вместо точки отобразится кружок. А если <ul> написать три раза, - то квадратик.
Гиперссылки
Что такое гиперссылки? Гиперссылки, они же URL ("урлы"), "линки" и прочая - основа всего инета.. Собственно, встречаете вы их на каждом шагу - вот хотя бы тут, в меню, при переходе на другую страничку, в другой раздел.. В этой главе я расскажу не только банальное известное 90% сетянам "<a href=" но и про другие хитрушки, знакомые немногим. Но будем последовательны, итак.. урл:
<a href="http://что-то там.ру">наименование линка</a>
так выглядит обыкновенная ссылка в коде. А в броузере мы увидим то, что находится в "контейнере" тега, то есть в нашем примере это - "наименование линка".
Казалось бы, все ясно, но есть нюансы..
Пути в гиперссылка могут быть абсолютными или же относительными.
Что такое абсолютный путь?
Это ссылка вида <a href="http://srez.ru/">мой сайт</a> - ссылка, ведущая на мой сайт из любого места, даже будучи расположенной в сохраненном на винте документе она будет переправлять пользователя на забитый в нее адрес.
Что такое путь относительный?
- это путь, отсылающий юзверя с учетом текущего его местоположения. Например, мы имеем сайт http://srez.ru/ . А в нем имеем пачку директорий, среди которых, например, XXX - гляньте в адресную строку бродилки (тем кто в танке - это в самом верху ;0)) видим там примерно такое - http://srez.ru/директория/файл.html (вообще обычно пага оканчивается на .html, или даже .shtml, а у пользующих php - вообще файлы "без расширения", но это не суть важно),
//Тем, кто в танке: если вы читаете статью и у вас вверху не http://srez.ru/index.php?n=teach/html/links , http://ннм.ru/sectionX.php?adate=teach/html/links или http://foox.by.ru/TEACH/HTML/links.shtm - то ее уже кто-то сплагиатил :0)//
В общем.. - относительный путь (в конкретном случае следует рассматривать то, что после знака "равно") читается как Сайт, директория "teach", в ней директория html, и в ней уже лежит файло с именем links (окончание не пишу, потому как оно прописано в скрипте .php) со всей этой пургой. Итак.. рассмотрим ссылки на страничку "index" (файл "Бредисловие"):
"Абсолютный" ("жесткий") путь:
<a href="http://сайт.ru/директория/файл.html">имя ссЫлки</a>
Зависимый путь:
<a href="файл.html">файл</a>
Что же видим? Зависимый путь и короче (а, следовательно, и меньше весит и его проще писать!) и удобнее - не нужно припоминать весь путь - достаточно быть уверенным, что файл.html лежит в одной директории сайта с файлом, к которому или из которого мы обращаемся. Это облегчит юзверю житие в случае, если он тупо сохранит странички на винт.
Показываю на пальцах: -
в директории X есть два файла - Y и Z
так вот.. в любом из этих файлов будет работать ссылка на другой поставленная как просто
<a href="Y.html">название ссылки </a> или же
<a href="Х.html">название ссылки </a>
Ну а что делать, если он лежит в другой директории?
Тут уже придется учесть часть пути..
нужно представить себе "дерево".
Сайт.ru:
/X
fail1.html
fail2.html
fail3.html
fail4.html
/Y
/G
fail5.html
Для тех, кто в танке, поясню подробнее: На сайте две директории - X и Y. В директории Х лежат 4 файла. В директории Y лежит директория G, в которой лежит еще один файл.
Задача - поставить ссылку, открывающую один из первых 4-х файлов из файла fail5.html
абсолютный путь: <a href="http://сайт.ру/X/fail1.html">название ссЫлки на 1-й файл</a> - ссылка этого вида сработает с любого места сайта, даже если конкретно эту HTMLьку перенести на совсем другой сайт.
абсолютный путь до файла file5.html в этом случае соответственно-
<a href="http://сайт.ру/Y/G/fail5.html">название ссЫлкина 5-й файл</a>
Теперь - зависимые пути.
до files1.html из файла files5.html:
<a href="../../X/fail1.html">название ссЫлки</a> - если перенести файл с такой ссылкой в другую директорию сайта - она уже не сработает..
до files5.html из файла files1.html:
<a href="../Y/G/fail5.html">название ссЫлки</a> - эта сслыка тоже не сработает, если ее местоположение внутри сайта изменится.. - например в реультате реформирования раздела.
Теперь пояснение - "../" это означает команду бродилке подняться из текущей директории на уровень выше. Сколько их у нас всего? Сайт.ру/X/Y/ считаем: Сайт - это у нас "корневой каталог" (как диск С:, например), в нем директория Y в которой еще и G. Две директории. Следовательно, "../" пишем два раза - без кавычек ессесно. (см. выше). Теперь бродилка с текущего места (из файла fail5.html), откуда получила ссылку, выберется в корневую директорию (http://www.сайт.ru/), но отсюда надо идти в другие директории, опять вглубь сайта.. Идем: /X/ - на директорию вглубь.
Суть процесса понятна?
Еще вариант, если файл, в который ведет ссылка, находится в той же директории, можно написать просто <a href="fail4.htm">
В этом случае, бродилка попробует запустить заданный в ссылке файл в этой же самой директории, где находится содержащий ссылку файл.
С fail5.html на другие файлы такая ссылка не прокатит.
(Она должна будет иметь вид ../../X/files1.html)
Но самое удобное, это ПУТЬ ОТ КОРНЯ, он же "относительный"
Мы просто указываем путь относительно корня (начала сайта)
То есть, если мы напишем /X/fail3.html, то при условии, что бродилка находится на сайте, а не смотрит на сохраненную пагу, мы попадем аккурат на файл3.html
Этот способ указания ссылок наиболее оптимален, так как нам не нужно высчитывать на сколько уровней подниматься относительно директории с файлом, из которого мы идем. Мы просто указываем путь до того файла, который хотим видеть от КОРНЯ сайта.. с его, так сказать, начала...
Например, открыта у нас в Far`e или какой ее подобной оболочке директория Program Files. Написав в командной строке c:/windows/notepad.exe - в этом пути не учитывается ОТКУДА мы обращаемся к файлу такому-то. Учитывается только где он лежит относительно корня. В нашем случае это диск Ц. В случае вашей странички - http://пага.ру/
И вид у ссылки будет: <a href="/teach/html/index">начало уроков по HTML</a>
Что еще нужно знать про ссылки?
Иногда очень удобно бывает, чтобы ссылка открылась в новом окне, а та страничка с которой мы пошли, осталась неизменной и никуда не пропала. В этом случае мы можем навести на линк курсор и нажав правую кнопку мыши, выбрать в контекстном меню вариант "Открыть в новом окне" (для туканов: вторая сверху строка субменюшки*). А можно - облегчить посетителю жись и прописать эту опцию в своей ссылке самостоятельно:
<a href="http://сайт.ru/X/fail1.htm" target="_blank">открыть "fail1.html" в новом окне</a>
да-да.. вот это самое target="_blank" Оно пишется через пробел после href="URL" и закрывается символом >.
какие виды target еще бывают?
_self - это загрузит линк в активное окно. То есть в то, в котором нажат линк. Он срабатывает по умолчанию.
_parent
_top
- последние два вам не понадобятся, ибо к тому времени когда вы дозреете до понимания, как этим пользоваться, вы уже будете знать, что оно делает и так. Используется достаточно редко? Преимущественно, всякими ленивцами-извращенцами по привычке мающимся давно устаревшими фреймами :0)
Кроме общепринятой функции перехода со странички на страничку, гиперссылки могут обеспечить и переходы внутри одной странички. Такие "урезанные" гиперссылки называются "якоря", и работают по принципу меток.
Разместив где-либо в тексте "якорь" вида <a name="число или имя (английскими буквами!)", вы можете позиционировать страничку этой меченой строкой по верхней кромке окна бродилки. Набираем в адресной строке имя нашего файла, но после концовки ставим дополнительное "#имя метки". Например метку в файле file1.htm мы назвали metka 2 - обратиться к ней можно вызывав файл /путь/file1.htm#metka2 - это можно сделать как вручную, набрав это в строке адреса, так и забив в ссылку вида <a href="file1.htm#metka2">обращение к метке №2</a>
Вот, собственно, и все основное, что нужно знать о гиперлинках. А.. да, конечно же
Ссылки могут быть так же прилеплены и на картинки. То есть срабатывать при наведении/нажатии курсора на картинку.
Вот это вставит в докУмент картинку название.gif шириной 82 пиксела, высотой 90 пикселов и имеющую бордюр в 0 пикселов. То есть не имеющей оного :0) :
<img src="название.gif" width="82" height="90" border="0" alt="картинка">
но про картинки и фоны будет отдельная глава, так что наберитесь терпения и листайте по порядку ;0)
Цвета в HTML.
Тег, задающий цвет:
color="#FF0000"
пример: <font face="Comic Sans MS" size="1" color="#FF0000">текст</font>)
Принцип обозначения цвета.
цвет можно задать двумя способами:
a) цифрами, что будет более точно по оттенкам.
б) английским словом.
способ А. Ставим #, после чего пишем цифры .
первые две цифры - это насыщенность красным
вторые две цифры - это насыщенность зеленым
третьи две цифры - это насыщенность синим цветом.
Почему именно три параметра? Потому что это не что иное, как способ получения цвета в телевизоре - RGB (Red Green Blue). Ведь изображение в обычном ЭЛТ мониторе формируется по принципу высвечивания трех точек заданных цветов: чем ярче точка, тем больше этого цвета в нашем "пикселе" (пиксель - "точка"). Цифры задавать по 16-ричной системе, т.е. не от 0 до 10, а от 0 до FF.
0,1,2,3,4,5,6,7,8,9,0А,0B,0C,0D,0E,0F - это и есть 16-ричный счет. И именно в пределах этого и можно задавать каждому сегменту свой цвет. То есть минимально это может быть 00 00 00, что соответствует черному, максимально - это будет FF FF FF, что соответствует белому. все промежуточные комбинации - это уже оттенки. Например красный цвет - это FF 00 00, зеленый - это 00 FF 00, синий - 00 00 FF.
способ Б. Для упрощения набора основных цветов в стандарте HTML было позволено замещать циферный ряд обычным словом, обозначающим тот или иной цвет в английском языке. Например словонаписание color=black окрасит выделенное тегом в черный цвет, green - в зеленый, white - в белый и т.п. Слова, обозначающие цвет, можно легко найти в словаре. Но я все же советую использовать именно 16-ричное обозначение кодом, поскольку это с большей точностью будет отбражено бродилками разных производителей. Да у многих поисковиков есть такая фича, как сравнение цвета надписей с цветом фона. Зачем это им надо? Про это читайте в следующей книге "Сусанин и К" (если вы скачаете эту книгу и положите в директорию где лежит эта книга, то она будет доступна по этой ссылке). А пока же просто примем к сведению, что циферный код хоть и сложнее писать чем слово, но правильнее.
Тегами цвета можно задать не только цвет шрифта, но и цвет большинства элементов HTML, но об этом продолжим в стилях.
Таблицы в HTML.
Таблицы в HTML являются одним из самых необходимых элементов, и самыми универсальными средствами форматирования картинок и текста. Есть коенчно и альтернативные способы, такие как слои например, но это громоздко, тяжко и неудобно.. Дело в том, что всякая бродилка видит слои по своему, и для более менее приличного отображения слоев необходимо писать длиунный и нудный скрипт, да и тот не панацея.. В то время как таблицы, хоть в некоторых нюансах нередко и расходятся, но расхождение то минимально.
Итак, код простейшей таблицы 2х2 ячейки:
<table width="200" border="1" cellspacing="0" cellpadding="0">
начало таблицы содержит:
width - ширина (у нас 200 пихелей),
border - толщина каемки/бордюра нашей таблицы (у нас 1 пихель)
cellspasing - расстояние между ячейками,
cellspadding - отступ от границ ячейки внутри нее.
остальной код:
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
тег открытия строки
тег ячейки 1
тег ячейки 2
конец строки
начало второй строки
тег ячейки 3
тег ячейки 4
конец второй строки
конец таблицы
добавив в код сегмент:
<tr>
<td>3</td>
<td>4</td>
</tr>
мы получим третью строку с двумя столбиками.
Количество ячеек может располагаться и по-другому - например так:
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>
выделенние жирным в коде соответствует закрашености серым цветом в таблице.
все отличие такого построения таблиц залючается в появлении параметра rowspan="2"
цифра в котором соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в этой ячейке:
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>2</td>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>
Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди 2-ки стоит ячейка с цифрой 3? Все очень просто - буквально код расшифровывается как "ячейка 1", "ячейка 3, состоящая из ДВУХ подстрок", ячейка 2, второй строки. Но физически ячейка №3 принадлежит к ПЕРВОЙ строке! Ведь HTML читается именно построчно - слева-направо ;0)
А что будет, если поставить после 3-ки еще такую же ячейку? 3b например?
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="2">3</td>
<td rowspan="2">3b</td>
</tr>
<tr>
<td>2</td>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>
Да, да - в той ячейке тоже достаточно прописать rowspan="2".
А что, если в правой колонке нам надо три ячейки?
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="3">3</td>
<td>3b</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3c</td>
</tr>
<tr>
<td>3d</td>
</tr>
</table>
Читаем код: Ячейка 1 (обычная) > ячейка 3 (состоит из трех слитых воедино строк) > ячейка 3b (тоже обычная), тут у нас начинается вторая строка. Начинается она с ячейки №2, обозначаемой как "ячейка, состоящая из двух строк, т.е. слитых по вертикали ячеек", а ячейки 3с и 3d - совершенно обычные ячейки. Для упрочщения понимания, строки в таблице на примере обозначены разными тонами, т.е. каждый тон соответствует строке. Это немного сложно осознать с наскока, но это весьма важно - понимать очередность считывания и принцип построения, так что напрягитесь и постарайтесь :0) От глубины понимания процесса будет зависеть умение пользоваться ВСЕМИ преимуществами таблиц, а не 10-15% которыми пользуется большинство.
Если же у нас наличествуют яейки совмещенные по горизонтали, то вместо тега rowspan используется тег colspan естетсвенно в той ячейке, которая занимает площадь нескольких.):
Так же следует отдельно запомнить, что параметры, вставляемые в тег открытия строки (<tr>) IE не воспринимаются!!! Вот не хочет он их видеть и учитывать и все тут. Некотрые видит, а некоторые - ни в какую. Поэтому назначать теги будем только самим ячейкам или всей таблице сразу.
Рассмотрим как задаются размеры таблиц:
Мы можем задать ширину всей таблицы в целом единой цифрой. Это может быть как 100% (т.е. от края до края доступного пространства), так и четкая ширина в пикселях (на примере - 200):
В коде это пишется так:
<table width="200" border="1" cellpadding="0" cellspacing="0"> Или так:
<table width="100%" border="1" cellpadding="0" cellspacing="0">
По умолчанию* (т.е. если в значении ширины после цифры не идет знак процента (%)), число, указанное в кавычках, будет расцениваться как пикселы. Главное отличие в этом в том, что если размер указан жестко, в пикселах, то при сужении окна таблица "упрется" краями в тег в который она вложена и не даст ему "сузиться", если тот имеет ширину заданную относительно, т.е. в процентах от доступной ширины. Для большей наглядности рассмотрите этот пример.
ширину мы задаем, вставляя в тег начала таблицы параметр
width="число ширины (можно в процентах)"
так же можно задать и вертикальный размер -
height="число ширины (только в пикселях!)"
Имейте ввиду, что сужаемая таблица растягивается по вертикали. И этим надо пользоваться. НЕ нужно пытаться подогнать текст под жестко-фиксированную таблицу - это ламеризм. В таблице есть несколько видов выравнивания содержимого относительно краев таблиц:
align="left" align="middle" align="right"
valign="top" valign="middle"
align="center" valign="bottom"
align="right"
в каждой ячейке указан тип примененного в ней выравнивания, но кроме них существует еще и параметр justify. Это выравнивание по ширине с обоих краев. На большинстве страничек, причем, что удивительно даже на тех, которые делают казалось бы профессиональные команды, присутствует такой ламеризм как отсутствие выравнивания по правому краю:
...в каждой ячейке указан тип примененного в ней выравнивания, но кроме них существует еще и параметр justify.
Это выравнивание по ширине с обоих краев. На большинстве страничек, причем, что удивительно даже на тех, которые делают казалось бы профессиональные команды, присутствует такой ламеризм как отсутствие выравнивания по правому краю:
обратите внимание на правый край - неровно, неряшливо, некрасиво.. и читать противно если это выстроено парой-тройкой столбцов, как у многих интернет "газет" и "журналов". Казалось бы - ну и подумаешь.. однако скорость и простота восприятия реально выше, когда глаз перескакивает на начало следующей строки с всегда одинакового места, чем когда строки кончаются +/- 1 см от края. Особенно это касается больших и длинных текстов.
Именно поэтому я всем советую не забывать пр оэтот важный и нужный тег. Ведь и страничка станет куда красивше, выстроившись ровными столбиками, а не чем-то на манер потерявшей половину зубцов расчески :0)
итак.. теги выравнивания. Как правильно их прописывать и с чем они связаны? Вспоминаем принцип наследования* тегов, про который шал речь во "введении".
Назначая какой либо части или всей таблице желаемое свойство, следует представлять как оно повлияет на расположеную в таблице информацию:
выравнивание о левому краю
без параметров
тег выравнивания <centre></centre> примененный на эту ячейку на вложенную таблицу никоим образом не влияет - только на текст.
внутри ячейки применен
параметр "выравнивание
справа", но ему
противостоит тег
равнения по середине -
как видим тег
выравнивания по центру
получает приоритетное
влияние , как бы "забивая"
старший тег.
в это же время тег равнения на центр совершенно не влияет на выравнивание внутри таблицы другой таблицы или картинки - тег <centre></centre>влияет только на текст. применен тег выравнивания по левму краю, как в ячейке, так и в виде стандартного <centre>
в начало таблицы вставлен тег выравнивания по правому краю.
а текст, как видите может и обтекать таблицу с краев, и прилегать к тому краю, по которому выровнен.
Примечание: окно при просмотре вышеприведенного примера должно быть распахнуто пошире - иначе выравнивание можно не заметить (если вложенные таблицы упрутся в края основной таблицы).
При помощи таблиц можно осуществить самый замысловатый дизайн, расположить содержимое практически как угодно
Основная таблица с двумя вертикальными разделителями, в ней вложены еще несколько таблиц, на рисунке они выделенны черной каймой. Всмотритесь в структуру в целом - она поделена на вертикальные области, в которых "плавают" таблицы блоков - левой части, центральной части и правой части страницы.
Как видим из примера, единой таблицей наш дизайн не получится - ведь "распирающий" одну из ячеек текст исказит весь дизайн :0(
Вот именно поэтому и нужно пользоваться вложенными в одну, большую таблицу несколькими таблицами-блоками. Кроме того, это открывает дополнительные возможности по разметке всего этого хозясйтва.
Например у нас есть угол таблицы с менюшкой. От края надо отступить эндцать миллиметров, чтобы буквы не касались края экрана. Как это сделать? Способов есть много.
Например, ставим в ячейке главной таблицы выравнивание по правому краю, а в таблице, которую туда вкладываем, ставим выравнивание по левому.
Но более правильно, чтобы улучшить восприятие текста, прежде всего советую воспользоваться в основной таблице отступом от краев (тег cellpadding), благодаря чему у вас останутся элегантные поля. Чтобы таблица не портила вида своей рамкой, советую основную таблицу делать "невидимой" при помощи тега border (назначьте "бордер=нуль" и рамки таблицы будет невидно). Так же не забывайте пользоваться тегом "justify", который чтобы не пихать его в текст непосредственно, можно вписать в конкретную ячейку - <td align="justify"><td>.
Как видим - таблицы позволяют сделать практически любой эффект кроме наложения - в этом у слоев большое преимущество, но о них позже... Собственно про таблицы на этом не заканчивается, просто остальные области относятся скорее к манипуляциям стилями и слоями.
Но на последок уточним все параметры, какими можно манипулировать в таблицах:
выравнивание : width и height - пишутся последовательно или одиночно. Транскрипция примерно <td width="число" height="число"> </td>
Параметры задаются целым числом, либо же целым числом с %, т.е. ="100%" - выровнять по ширине от стенки до стенки
<table width="100" border="0" height="100" cellspacing="4" cellpadding="0" bgcolor="#999999">
<tr bgcolor="#CCCCCC">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table width="100" border="0" height="100" cellspacing="4" cellpadding="0" bgcolor="#999999">
<tr bgcolor="#CCCCCC">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
занятно, да? Теперь уточним значение использованных тегов:
bgcolor="код из шести цифр вида #000000" - задает фон ячейке, либо таблицы - в зависимости куда вставлен этот параметр.
bordercolor="#FFFFFF" - цвет бордюра (рамки)
Ну и про манипуляции с cellspacing и cellpadding не забываем :0) поварьируйте их размеры.
При помощи таблиц можно даже рисовать - например закругленные уголки.
Такой способ куда экономичнее, чем подставление картинок - ведь всяко меньшее количество кода HTML чем в самой маленькой картинке. Правда есть один нюанс - все раз загруженные с сайта картинки кэшируются у вас в компьютере, и если например таких картинок-уголков у вас добрый десяток, это не означает что одна и та же картинка будет грузиться десять раз. Напротив - она загрузится единожды и расставится по всем нужным местам. С таблицей это реализовать куда сложнее, особенно, если ваш хостинг не имеет ни SSI ни PHP. Так что в общем-то в большинстве случаев проще все-таки пользоваться картинками со сторонами пискселов по 5-10.
Да, еще мелкая, но полезная фича - например нам нужно вписать текст одной строкой и чтоб таблица подстроилась под ширину этой самой строки. Но зачастую, если у таблицы не определен размер, или определен заведомо меньший, чем у вашей строки, эту самую строку бродилка перенесет во вторую. Чтобы не позволить такого переноса, нужно в тег ячейки вставить слово nowrap. Никаких параметров ему прописывать не нужно, просто выделить с обих сторон пробелами. Строка в такой ячейке будет всегда прямая. Помните только что она будет "распирать" дизайн при попытке ужать окно до более узких размеров. Советую проверить как это будет смотреться и помнить об этом нюансе.
На этом про таблицы пожалуй все, но продолжение вы еще встретите во многих смежных разделах. А покамест листаем дальше.
Картинки в HTML
Картинки вставляются тегом <img src="/путь к картинке/название картинки . расширение картинки">.
Тег этот не "контейнерный", посему в закрывающей части не нуждается. Располагая этот тег внутри классической гиперссылки, мы можем добиться чтобы при тычке по картинке осуществлялся переход по ссылке:
Код, использованный в картинке:
<a href="куда переходим при нажатии">
<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left"></a>
То есть картинка - не что иное, как обычная ссылка, в которую вставляется код с адресом и параметрами картинки:
<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left">
Все задействованные в коде теги вам уже без сомнения встречались в предыдущих главах, за исключением разве что hspace и vspace - эти два тега тоже не являются обязательными, но при их наличии вокруг картинки образуется отступ в соответствующее количество пикселей от текста. Согласитесь, это намного проще, чем вымучивать эти пробелы при помощи таблиц, пробелов и слоев или же вообще лепить текст впритык к картинке.. Вокруг картинки при помощи border="1" можно соорудить элегантную рамочку, а при необходимости (если очень лень или по стратегическим замыслам) изменить размеры отображения картинки при помощи все тех же width и height - если указать в них меньшие размеры чем реально у картинки, можно вписать ее в любой, практически, дизайн.
Зачем это нужно? Почему бы не обрезать картинку графическим редактором - что намного более практично?!
Рассмотрим минусы занижения размеров картинки при помощи HTML:
- картинка сохраняет свои реальные размеры и, соответственно, вес - даже если вы сделаете огромадную картинку в мег весом, размерами с почтовую марку, грузиться она будет всеми своими мегами.
- картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное.
теперь плюсы занижения размеров:
- картинку можно вписать в дизайн, пожертвовав парой сантиметров, а при копировании ее на винт, она сохранит свои размеры.
Это нужно в редких случаях, когда вы вывешиваете картинку размерами большими, чем разрешающая способность монитора посетителя. И картинку в дизайн впишем, и сохранится она на все 2040 на сколько там положено.
Теперь, редко где используемая, но вполне приятная технология наложения на одну картинку нескольких ссылок - в зависимости от той области, на которую тыкаем и осуществляется переход. В чем-то эта технология экономична и удобна, в чем-то, как и всякий инструмент, - непрактична и неудобна. Но оценку можно ставить только в каждом конкретном случае. Поэтому я все же остановлюсь на ней подробнее:
Берется изображение:
Нажав на левую половинку, переходим на Google.ru, нажав на правую - переходим на мой сайт.
Как это реализовано?
Читаем код:
первая часть включается в тег картинки:
<img src="наша картинка.jpg" usemap="#Map">
далее, где-нибудь внизу, или в самом начале страницы, но в пределах тега <body> добавляем собственно "карту ссылок", как называется эта технология:
<map name="Map">
<area shape="rect" coords="2,2,60,74" href="ссылка на Google.ru">
<area shape="rect" coords="61,4,112,76" href="ссылка на мой сайт">
</map>
Примечание: жирным выделено то, что должно присутствовать обязательно, обычным текстом - переменные параметры.
Естественно, мы можем добавить к этим двум областям и третью строку, и четвертую и сколько угодно. Принцип чтения этого кода бродилкой, как обычно, сверху вниз. Поэтому, если ваши области чуточку перекрываются, то та, что прописана в первой строке, будет лежать "сверху", чем та, что прописана строкой ниже.
Как задаются координаты? Координаты задаются отсчитывая от левого верхнего угла картинки по пикселу в направлении левого верхнего угла и правого нижнего угла. В нашем случае, у первой картинки отступ 2 пиксела слева и сверху у 1 контрольной точки, а правый нижний угол, соответственно, отстоит от левого верхнего угла картинки на 60 слева и 74 пиксела сверху. Алгоритм понятен? Для тех, кто не допер, повторюсь: координаты левого верхнего угла задаваемой области относительно левого верхнего угла картинки + координаты правого нижнего угла области относительно все того же верхнего левого угла картинки. Конечно, вручную это все высчитывать долго и муторно, гораздо проще воспользоваться одной из специальных программ, автоматизирующих все рутинные процедуры. Вот, например, в DreamWeaver MX есть такая функция в виде простого "растягивания" области над картинкой и назначения ей ссылки. Никаких цифр при этом вводить не нужно - программа считает все сама. От вас требуется лишь ПОНИМАТЬ что творится в коде и уметь распознать эту фичу в коде других страничек, если когда-либо вам потребуется разобраться в устройстве других сайтов.
Координатные карты могут быть не обязательно квадратными - можно задать область-окружность, или произвольную область со сложным, изломанным контуром.
Рассмотрим работу с окружностью:
Повозив курсором над этой картинкой вы можете увидеть что область внутри лупы, сквозь которую смотрит глаз ведет на один сайт, а вся остальная (за редкими "просветами") - ведет на другой сайт.
В первом случае зона задана окружностью, во втором - многоугольником. Смотрим код:
<img src="наша картинка.jpg" usemap="#Map2"> - строка тега картинки изменяется только в имени карты координат. Полагаю уже все додумались, что одинаковые имена элементов в пределах одной странички недопустимы. Это касается, кстати говоря, и якорей.
А вот в вынесенных отдельно координатных тегах у нас изменения более заметные:
<map name="Map2">
<area shape="circle" coords="84,28,26" href="http://google.ru/">
<area shape="poly" coords="65,3,51,41,78,58,109,48,110,71,7,75,4,6,34,5" href="http://srez.ru/">
</map>
Первая строчка, как вы уже наверняка догадались, не что иное, как тот самый круг (в теге area shape указано "circle", что по-английски будет "окружность"). Координаты у нее высчитываются по методу определения центра окружности - это первые две цифры, а третья цифра - это радиус нашей окружности. Именно радиус, а не диаметр! (Для тех, кто в танке поясняю - радиус, это расстояние от ЦЕНТРА окружности до ее края. Центр, в свою очередь, - это та точка, которая равноудалена от любой точки на краю окружности)
Вторая строка кода - это наша многоугольная область, заполняющая большую часть свободного пространства вокруг окружности. В теге area shape у нее значится "poly", что означает многоугольник. Координаты тут вычисляются парами цифр (расстояние от левого и расстояние от верхнего краев). Каждой точке соответствуют две координаты. Точек может быть сколь-угодно большое множество, но злоупотреблять не стоит - "срубайте" углы, упрощайте систему - незачем громоздить жуткоплавные изгибы только для красоты. Поверьте, примерной разметки на скорую руку тут вполне хватит. Как только точек становится больше трех, наш потенциальный многоугольник становится треугольником. Ссылка, ему назначенная, будет срабатывать между точками. Если добавить еще одну точку (четвертую), но расставить их так, чтоб эти самые точки как бы пересекали собственные соединительный линии, то фигура может превратиться в подобие двух треугольников, сросшихся углами:
На этом про картинки пока что все, листаем дальше
Фоновые изображения в HTML
Фон, это та же картинка, только загнанная под текст и другие картинки. фон нельзя выделить мышкой, в отличие от картинок, выделяемых вместе с текстом. В этом одновременно его и преимущество и недостаток - в некоторых случаях. Фон простирается в пределах тега таблицы или же всей странички, если указан в теге <body>. Первое, конечно, предпочтительнее.
Прописываем фон:
<td background="/картинка фона.gif">
- фоном может быть любая картинка, вот только став фоном, она приобретет интересные возможности.
Например, как вы думаете сделаны дырдочки по краям этого клетчатого "листа"? Это не длинная картинка, это один небольшой квадратик с одной "дырочкой", просто как и всякий фон он многократно размножается по всей площади наделенного фоном тега. Так же сделана и тень от листа - темная полоска по краю - это всего лишь состоящий из четырех-пяти точек (пикселей) микрорисуночек
Кто особо любопытен может попробовать сохранить его как картинку :0) Если получится. Конечно придется покопаться в коде - если у вас Ехплорер :0) Ну а счастливым владельцам Мозиллы конечно достаточно глянуть "состав HTML", чтобы увидеть всю задействованную в нем графику с соответствующими линками.
В чем удобство фона, кроме многими ругаемого "украшательства"? Да в том, что правильно подобранный фон, мелкие, не затрудняющие загрузку детали-"примочки" и прочее, что у нас принято именовать гордым словом "дизайн", призвано скрасить однообразие, облегчить восприятие и вообще.. С ним приятнее. Хотя конечно и без него можно обойтись. Модно просто назначить таблице какой-либо однотонный цвет и довольствоваться этим. Фоном не стоит злоупотреблять - оптимально чтобы вся графика на странице, все украшательства не весили больше 30 кб. и то это много.. у меня например все эти бирюльки-дырочки, клетчатый фон и прочее весит чуток более 8 кб. Лишняя секунда загрузки практически не заметна, а глаз не "тонет" в пустоте белого, серого или черного фона. Фон, как и картинки, можно сделать анимированым, например флэшем, но для начала лучше .gif`ом, поскольку он наиболее прост и легок в изготовлении.
Да, если вы столкнетесь с неумелым использованием фона и текст, на нем расположенный, будет трудночитаем, советую его просто выделить мышкой и читать в темном выделении - увы, только так можно спасти свои глаза от надругательства многими современными "вебмастерами".
Из фона можно изготавливать и рамочки, и уголки к ним - закругленные, завернутые и всяко-разные другие. Главное не переборщить с наворотами, чтобы они не оттягивали на себя чересчур много внимания - особенно это касается частенько встречающейся назойливой, непрекращающейся анимацией всем давно опостылевшего файла с анимашкой, который можно найти на сотнях тысяч дилетанстких страничек начинающих вебоделов.
Совет - фон старайтесь ориентировать либо вертикально, либо горизонтально. Это упростит растягивание в ту или иную сторону, чтобы дизайн наш при стискивании или растягивании окошка не "плыл".
При назначении фона вполне можно ограничиться картинкой со стороной 1 пиксель на 5-15.
Конечно, кроме перечисленных свойств у фоновых изображений огромное количество возможностей, но подробности - в разделе "стили"
Спешиал символы. вставляя в код эти &#чего-то там; вы получите в отображении бродилки следующие фичи:
Таблицу можно посмотреть в отдельном файле.
Ну вот :0) таблицу символов рекомендую выпотрошить и хранить в темном сухом месте :0) авось пригодится ;0) Кто не понял для чего нужно, поясняю - нужно в основном для понта тем, кто пытается достичь "абсолютной крутизны", т.е. служат признаком, типа, профессионализЬма, ну и все такое. А кроме того этими символами можно побаловаться извращением самых причудливых смайликов во многих чатах ;0) Юзайте на здоровье :0)
Фреймы в HTML
Собственно, эта глава объясняет скорее почему не надо пользоваться фреймами, чем то, как ими пользоваться.
Что такое фрейм? Это определенная область, в которую грузится другая страничка. Таким образом то, что вы видите собирается из нескольких HTMLек. Собственно примерно то же осуществляет и SSI, и PHP и много других языков программирования, скриптов и т.п.
Фреймы придуманы еще на заре становления HTML, для облегчения создания страничек большого размера. Фреймы позволяли хранить, например, менюшку в отдельном файле, и разом, не перелопачивая десятки, сотни и у некоторых даже тысячи html-страничек, ради того чтобы добавить или убрать пункт меню. Очень удобно, казалось бы.. но - система фреймирования почему-то не всегда (я бы даже сказал, - почти никогда!) правильно воспринимается большинством поисковиков. Рейтинг фреймовых страничек в большинстве поисковиков меньше, чем точно те же странички, с совершенно тем же содержимым, но со встроенным меню - без фреймов. Я то и дело слышал с разных сторон противоречивые отзывы на фрейм и решил проверить сам: создал на халявном хостинге десяток разной внутренней структуры страничек имени "Васи Пупкина", внешне совершенно одинаковых, но различающихся внутренним устройством, и через два месяца их висения в Сети "замерил" находимость по тем или иным словам в разных поисковиках. Но в этой книге я собранные данные, аналитику и нюансы увеличения находимости громоздить не стану - налюдений в этой области вдесятеро большего объема, чем этот скромный учебник. Посему кто интересуется - запаситесь терпением до выхода отдельной книги.
Итак, вкратце эксперимент со страничками показал, что в самом низу списка оказалась страничка на фреймах, выше всех была страничка на SSI технологии и PHP инклюдах.
По сути эти две технологии, с успехом заменившие устаревшие фреймы, показали равную находимость и удобство. Не говоря уж о куда большей простоте использования. Но большинство разбирающихся в этих вопросах программеров дружно указали на превосходство PHP перед SSI в плане удобства их использования для сервера. Не буду пока-что вдаваться в детали. Скажу лишь, что если есть возможность - вместо фреймов нужно использовать PHP, а если нет PHP, - то ограничиться SSI. Увы большинство халявных хостингов не дают использовать PHP и SSI. Но последнее все увереннее входит в "обязательный сервис". SSI можно использовать, например, на том же by.ru где для тех, кто не может или не хочет платить деньги есть прекрасная возможность опробовать свои силы в создании страничек, ничего за это не платя. Хотя, конечно, любой бесплатный хостинг всегда предоставляет едва ли 10-15% тех возможностей, что ждут вас у полноценного, платного хостера. Но про хостинги - уже опять-таки в следующей книге, посвященной целиком хостерам и их расценкам.
Пока же, настоятельно советую не маяться дурью и не юзать фреймы. Это, наконец, и пользователю неудобно: сохранишь страничку, а там куча каких-то файлов, оборвавшиеся связи, путаница в рангах загрузки и путях.. помучаешься, помучаешься, да и плюнешь..
Ведь если сайт мелкий, пять-семь страничек всего, то фреймы ему не нужны, проще уж поменять в каждом файле менюху, а если сайт более крупный, как правило. его колонка меню все равно не уместится в пределах одного экрана - так зачем отягчать читателя необходимостью еще и фрейм листать, чтоб добраться до нижних пунктов? Путь уж меню движется вместе с прокруткой всего сайта. Ктому же не каждый может допереть, что и фрейм можно прокрутить вниз, за пределы экрана.
На сем тему считаем отложенной, а вопрос закрытым. Едем дальше...
Слои в HTML
Вот такой эффект можно получить, используя слои. Собственно, точно такого же эффекта можно достичь и одним из множества фильтров Ехплорера, но второе решение будет отображаться правильно только в самом Ехплорере. Итак, что же из себя представляет слой?
Код слоя:
<div id="имя слоя" style="position:absolute; left:204px; top:143px; width:171px; height:62px; z-index:2">содержимое слоя</div>
id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!
style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких как расположение поверх чего угодно.
left - расстояние от левого края - может быть как в пихелях, так и в процентах от общей ширины экрана.
top - расстояние от верха.
ну ширина и высота вам уже известны, их не упоминаю.
z-index - значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн построенный на слоях намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы - как положительные, так и отрицательные.
В числе положительных:
удобство для дизайнера - большая свобода и больше эффектов.
быстрее загрузка и не дожидаясь закрытия замыкающего тега.
удобнее манипулировать их содержимым
отрицательные стороны:
сложно подстраиваться под меняющееся разрешение монитора. И еще сложнее делать такой дизайн гибким - чтобы ширина слоя менялась сообразно ширине окна. Это конечно можно сделать, при помощи весьма громоздкого скрипта, но.. второе преимущество из списка положительного мы теряем.
поисковики.. многие последовательности тегов, как ни вопят владельцы поисковых машин - а находятся хуже! Вывод - будь проще и к тебе потянутся.
Такие вот пирожки-печенюшки..
Так и останутся слои элементом чисто декоративным и никак не основным. Зато при помощи слоев получаются приятные такие менюшки - в примерах скриптов вы сможете найти много таких примочек, пока же мы рассмотрим лишь основные параметры слоев как таковых.
Дополнительные возможные теги:
background-color: цвет фона
layer-background-color: цвет слоя
border: 1px none - если убрать "ноне" - то вокруг слоя появится бордюрчик 1 пихель толщиной.
У слоев есть много других тегов, но как правило они все предназначены для использования наряду со скриптами, поэтому в них мы пока зарываться не будем, а изучим следующую тему - каскадные таблицы стилей, оно же - CSS.
Каскадные таблицы стилей - CSS
Когда я освоил все вышеперечисленное (а осваивать пришлось, кстати, полностью самостоятельно - увы, на тот момент я не набрел на многочисленные сайты с обучалками и сурседами) я задумался: а нельзя ли как-то уменьшить те многоэтажные конструкции, какими были мои первые сайты.
В пору раннего чайничества, я бывало рожал странички в 200-250 кб (Страшно вспомнить :0)) и мои знакомые приходя на такое "творчество народов севера" долго матерились почему все так туго грузится.
Как оказалось, некоторое время спустя, кем-то умным была придумана специальная фича, названная "Каскадные таблицы стилей", в народе CSS, или просто "стили".
По сути своей стили - это присвоение группе элементов, промаркированных по типу или присвоенному обозначению ("имени"), каких либо сложных параметров, описание которых для каждого из этих элементов утяжеляет страничку донельзя... Да и муторно оно..
В общем прописав какому-либо элементу СТИЛЬ, мы можем впоследствии, имея хоть сто таких элементов, поменять вид каждого в течение буквально пары минут, изменив их СТИЛЬ в одном единственном файле.
Примерное содержание такого выносного файла стиля:
A:link {COLOR: #666666; TEXT-DECORATION: none}
A:visited {COLOR: #666666; TEXT-DECORATION: none}
A:active {COLOR: #666666; TEXT-DECORATION: none}
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
BODY {margin="5"; SCROLLBAR-FACE-COLOR: #FFFFFF; FONT-WEIGHT: normal; BACKGROUND: #FBFBFB; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; COLOR: #666666; SCROLLBAR-3DLIGHT-COLOR: #AAAAAA; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #EEEEEE; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #555555;}
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.large {FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
.navigation {BACKGROUND: #FFFFFF}
.navigationcell {BACKGROUND: #FFFFFF}
.micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.z1 {FONT-SIZE: 8pt; COLOR=#999999; FONT-WEIGHT: bold; text-align: center}
.t3 {FONT-SIZE: 8pt; }
.link {FONT-SIZE: 12; FONT-STYLE: italic}
.txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
.t: link {COLOR: #777777;FONT-WEIGHT: bold;}
.t: visited {COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
FILTER: dropShadow(Color=white,OffX=1,OffY=1,Positive=2 ); HEIGHT: 10
Вот такая фича примерно обеспечивает сайту тот вид, в коем вы его наблюдаете :0)
Разложим по кирпичикам, и начнем со ссылок:
A:link {COLOR: #666666; TEXT-DECORATION: none}
A:visited {COLOR: #666666; TEXT-DECORATION: none}
A:active {COLOR: #666666; TEXT-DECORATION: none}
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
А: здесь означает класс элементов, в HTML называемых "ссылки", то есть теги вида "<a href..."
link - обозначение линка в покое, - так сказать, исходный вид, в котором он предстаёт, когда мы видим пагу только-только после ее загрузки.
{} а вот промеж таких скобок в CSS прописывается присваемый элементу стиль, то есть праметры, какие будут автоматически присвоены выбранному элементу.
Так же у нас тут имеется цвет линка - color:#666666 - то есть темно-серый.
И еще один момент - если в коде самой странички пишется font color="", в то время как в CSS - "color: имя цвета;" - точка с запятой ставится после каждого свойства в списке, если после него идет другое свойство. После последнего ставить не обязательно, но в принципе можно.
И оформление текста - TEXT-DECORATION. Писать это заглавными, с большой буквы или строчными - совершенно равнозначно. Здесь написано заглавными сключительно для выразительности и заметности :0)
Итак, в параметре сём у нас значится "none" - это означает, что нам бродилка покажет линк в виде простого текста - не синего, как по умолчанию, и без дурацкого этого подчеркивания :0)
Определение "visited" - оформить ссылку точно так же как и посещенные уже ссылки. Если вы замечали раньше - то они, посещенные, по умолчанию бродилками обозначаюЦЦа как потемневшие. А у нас будет равнообразно. Ибо нефиг..
Итак, первые две строки - определили вид, в котором линки находятся по изначальному состоянию.
Но как выделить их, обозначить, что это не просто текст, а все же ссылки?
Для сего у меня прописаны следующие две строчки:
A:active {COLOR: #666666; TEXT-DECORATION: none}
"актив" - это есть линк, выделенный мышкой, но с убранным с него курсором. Если присматривался иногда в следствие кривых рук, мог видеть этакие повисшие вокруг линков или картинок "рамочки" выделения - вот это оно и есть :0)
По здешнему оформлению оно, опять же, ничем не отличается от предыдущих параметров, поэтому в самом тексте я его выделяю, как правило, жирным (<b>вот так</b>).
а вот третье...
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
hover - если мне не изменяет склероз, "ховер" переводится как "парение" (не мозгов, а в воздухе!) :0)
Этот параметр указывает бродилке как оформить эту ссылку при зависании на ней курсора. Здесь я оставил ей первоначальный цвет, а выделять решил подчеркиванием. Следует также обратить внимание на то, что тут уже вместо "none" стоит "underline" - что, собсно и есть это самое "подчеркивание" при наведении курсора.
этими четырьмя строками мы разом назначили ВСЕМ ссылкам на страничке, в которую будет подключен этот стиль, особый внешний вид. Эта настройка касается ВСЕХ ссылок как таковых.
а представьте теперь, что было бы, если бы на каждую ссылку писать вот такое? а ссылок - 30, 40? экономия в 40 раз! :0)_)
Смотрим дальше:
BODY
{
margin="5";
SCROLLBAR-FACE-COLOR: #FFFFFF;
FONT-WEIGHT: normal;
BACKGROUND: #FBFBFB;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
COLOR: #666666;
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #EEEEEE;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #555555;
}
BODY - это "тушка странички".
В ней можно поиздеваЦЦа над скроллбаром (для тех кто в танке: такая фича справа по вертикали, за котороую можно тягать вверх-вниз, проматывая не умещающееся на экране :0))
В данном варианте у меня написано:
margin="5"; - это отступ в 5 пихелей от края бродилки - по умолчанию гораздо больше. Если отступ вообще не нужен - ставим значение "ноль":0)
SCROLLBAR-FACE-COLOR: #FFFFFF;
морда лица скроллбара. То есть раскрашивает самую большую поверхность заданным цветом. У меня это - в тон странице
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
это блик на ползунке и кубиках со стрелками
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
это "тень" - продолжение "блика", (тоже самое, только нижняя грань и правая)
COLOR: #666666;
это цвет вообще...
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
это тонюсенькая каемочка вокруг каждой детали
SCROLLBAR-ARROW-COLOR: #999999;
цвет треугольных стрелок вверху и внизу линейки
SCROLLBAR-DARKSHADOW-COLOR: #555555;}
глубокая черная тень-контур
SCROLLBAR-TRACK-COLOR: #EEEEEE;
цвет дорожки..
Вот собственно и все. Таким вот нехитрым извратом и красят в разные цвета скроллы страничек :0) Правда, работает это только в эксплорере.
Смотрим далее:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
это обозначает последовательность шрифтов, коими отображается контент сайта. Если нету первого, то бродилка использует второй. Если нет второго - то третий. Ну а если и четвертого нету, то это линуксоид без кириллических шрифтов приперся, ну его лесом.. ;0)
теперь ячейки таблиц:
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
что такое ТД, я надеюсь, вы уже запомнили, а если нет - придется перечитать все про таблицы с с самого начала.
Итак.. здесь прописано - FONT-WEIGHT: normal; - шрифт нормальной толщины.
FONT-SIZE: 11pt; - размер шрифта. Обратить внимание на "pt" - это не в пихелах! это в ПУНКТАХ. Хотя особо критичных разниц тут нет, просто другие единицы измерения..
Тут можно ставить и просто цифру без приписки в каких оно единицах. Тогда цифра сработает как размер относительный и позволит юзверю небрежным движением мышки по масштабируемости бродилки испортить наш великий дизигн нафих. А это не есть гут.. Посему ни процентов (да, можно и процентами!), ни свободных разрядов от -7 до просто 7 ставить не рекомендую. Или - если ты уж настолько крутой извращенец, ставить надо везде, а потом долго и муторно двигать масштабность, наслаждаясь, как твою страничку морщит и плющит по всем абзацам %0)
Ну и, наконец, это:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это у нас означает тоже, что в самой паге "Имя шрифта".
Только тут перечислено на всякий пожарный случай аж четыре шрифта, более или менее способных заменяться не сильно портя дизигн. Зачем это надо? На случай, если на ваш хомяк* забредет какое-нибудь интеллектуальное убожество, умудрившееся угробить у себя на компе Вердану и Ариал. Хотя эти два шрифта во всю обычно используются Виндой и Вёрдом, да и многими другими прогами. Они самые удобные и легкочитаемые, посему, - практически незаменимые. Так вот - если все же у какого-нибудь мудака не окажется этих шрифтов - то пага покажет ему то, что прописано дальше - Хельветику или Сан-Сериф :0) Если и этого у него нет, то бродилка покажет ему что там у него стоит и пусть он этим поперхнеЦЦа.. :0)
Этим абзацем мы прописали что ВЕСЬ текст на паге отражаеЦЦа 11-м размером, шрифтом одним из указанных там, выше.
Едем дальше:
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это обрезаный тег слоя, который можно использовать для обозначения выделения определенного участка таблицы или текста. Ну - вот положим не надо мне весь текст на страничке однообразным - хочу кусок какого-нить извратного цвета и вида.. заключаем его в тег DIV и назначаем определенные параметры. Получаем выделение абзаца :0)
На данный момент он совершенно идентичен основному тексту.
А вот так пишется параграф. Он и обозначается просто буквой P.
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
В нем у нас опять же совершенно идентичные параметры. но если задать иные - то все параграфы станут выглядеть не так как текст основной странички. Следует помнить, что все параграфы, как правило, выделены некоторым отступом сверху и снизу от остального текста. Это легко поправимо, но об этом позже.
Итак, мы задали параметр отображения всем основным элементам:
Тексту,
Ссылкам,
Таблицам,
Блокам и
Параграфам .
Но что делать если надо какой-то махонький абзац сделать не таким как остальные абзацы? Что делать если один или два или больше элементов должно иметь отдельный от большинства вид? Возиться с параграфом тут неуместно :0)
Тут можно выкрутиться таким образом:
начало нового стиля обозначаем точкой: .
а за ней сразу вписываем имя нашего особого стиля. Вложенного, так сказать, каскада:
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это обозначает, что теги, в которые включено "class="small""
будут показывать нам свое текстовое содержимое именно в том виде, который прописан в этом абзаце. То есть на 1pt меньшего в данном контексте размера :0)
типичный пример:
<b><a href="бла-бла-бла" class=small>текст</a></b>
или <p class=small>текст</p>
или <div class=small>текст</div>
или
<td class=small...
<table class=small..
ну и т.п.
Точно так же внутрь тегов можно одновременно и по нескольку запихивать теги равнения.. типа align=center (left, right, justify)
Вот еще один класс:
.large {FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
и еще:
.navigation {BACKGROUND: #FFFFFF}
и еще:
.navigationcell {BACKGROUND: #FFFFFF}
и еще:
.micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
а зачем собсна нам каждый раз писать тег выравнивания в самой паге по сто раз? Мы же можем впендюрить его прямо в стиль!
Вот таким образом примерно:
.z1 {FONT-SIZE: 8pt; COLOR=#999999; FONT-WEIGHT: bold; text-align: center}
только тут он прописывается не просто как align=, а как именно как text-align:
АХТУНГ!!! - обратить внимание, что не через "равно", а именно через двоеточие!!!!
.t3 {FONT-SIZE: 8pt; }
а в этом случае мне нужно было просто изменить лишь размер и остальное я не прописал..
что у нас получилось в этом случае?
Рассмотрим пример взаимодействия и взаимовлияния стилей:
(еще это называеЦЦа "наследованием"):
имеем:
<div class="micro">
текст, текст, текст, текст, текст, текст, текст, текст, текст
<p class="large">текст, текст, текст, текст...:0)</p>
текст, текст, текст, текст, текст, текст, текст, текст,
</div>
Принцип ясен?
(Для тех, кто в танке: - действие стиля распространяеЦЦа на все, что внутри обозначенного объекта, ЕСЛИ внутренние, вложенные теги, не снабжены СОБСТВЕННЫМИ стилями, противоречащими или дополняющими стиль объекта. Стиль перестает действовать сразу по закрытии тега его содержащего, и в действие вступает стиль объекта более "высокого уровня", - того, что вокруг вложенного, или следующего)
Чем-то это все похоже на матрешку. Это вам отвлеченный образ - для лучшего понимания проблемы :0)
.link {FONT-SIZE: 12; FONT-STYLE: italic}
а вот тут у меня стоит "италик" - это означает, что текст будет подвержен модификации в стиле <i></i> - то есть станет наклонным :0)
.txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
а вот этим я решил выделить линки другого типа - те, которые в менюшках типа календарей по датам:
.t: link {COLOR: #777777;FONT-WEIGHT: bold;}
.t: visited {COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
но в них уже будет меняться и цвет, и толщина букв :0))
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
а вот эта приписка есть фича чисто плорерная - то есть в других броузерах даже не отобразится.
FILTER: dropShadow(Color=white,OffX=1,OffY=1,Positive=2 ); HEIGHT: 10}
Это называется "фильтр", встроенная в бродилку фича, отражающая такие спецэффекты как "тень", "свечение", "переливание" и многое другое :0)
Рассмотрим егоные параметры: (Color=цвет отбрасываемой тени - белый!, OffX и OffY - это на сколько пихелов тень будет отстоять от букв - у нас это на пихель вправо и на пихель влево. Можно к цифири припользовать знак "минус" - это даст вывернутую влево и вверх от цифири тень :0)
"Поситиве" я, честно сказать, не помню - по-моему плотность - поэкспериментируйте :0)
АХТУНГ!! - обратить внимание, что субпараметры взяты в ( ) и опосля них идет - ";" - точка с запятой. Закрывает каскад все тот же }
параметры внутри {} разделяются опять же ";" но опосля последнего параметра, перед самой "}" точка с запятой вовсе не обязательны.
ну, вот собсно и все самое основное про CSS. На фильтрах я более подробно останавливаться не буду, поскольку они пригодны в основном только для плорера, а следовательно серьезному вебоделу нафиг не сдались - при всей приятности нет смысла возиться с тем, что видно далеко не всем посетителям.
Осталось только пояснить, что вместо того чтобы лепить вот такие "многотомники" в каждую опять же пагу, можно хранить на сайте всего ОДИН единственный файл, вызывать который из каждой потребной паги. Или - хранить таких стилей несколько - для удобства или дизигна: на одной паге так, на другой этак.
Подключается оно так: пишем эту галиматью в текстовый файл, прямо в блокноте - это проще! и сохраняем на сайте как "имярек.css"
Опосля сего открываем пагу и в сааамом начале, под тегом </head>
вставляем вот такое:
<LINK href="/путь/имярёк.css" type=text/css rel=stylesheet>
менять в этой строке можно только путь к файлу стиля и наименование самого файла.
Тем кто в танке: ВСЕ, совершенно все имена файла на вашем сайте должны быть набраны исключительно ЛАТИНИЦЕЙ, то есть английскими буквами.
При помощи стилей можно делать и кучу украшательств: например таблицы не сплошной линией а пунктиром или точками:
В первом случае у нас применен вставленный в начало таблицы тег
style="border: dotted 1pt; border-color: gray;
Во втором случае вместо dotted значится dashed
После этих тегов ставим размер наших точек или тире - и проверяем как смотрится.
Этими же стилями можно преобразить и кнопки, и тег HR -
--------------------------------------------------------------------------------
Благодаря стилям можно даже ссылки подчеркивать пунктиром, как сейчас входит в моду.
А еще, некоторые бродилки позволяют переключать стили, что при грамотном их написании может служить своеобразными "скинами" сайту. Сменил стиль - поменялось все - раскраска, рамки, шрифт и т.п. Очень удобно и приятно.
Да, чуть не забыл.. тег <H1></H1> про который я обещал рассказать подробнее - так вот, многие поисковики положительно воспринимают заголовки прописанные в этом теге. Причем чем меньше цифра тега, тем выше "приоритет" этого заголовка. Всего их 6, с H1 по H6. H6 самый мелкий, и более или менее вписывается в дизайн, а вот H1 норовит растянуться в черте какие величины
- вот такими буквами. Но что же делать, ведь для увеличения находимости нам нужен этот тег?! При всей его неудобоваримости и нежелании вписываться в дизайн он приносит неплохое количество "очков" пользы перед поисковиками. И тут нам помогут стили. Прописываем в CSS вот такой каскад:
H1{FONT-SIZE:10pt; COLOR:#666666; font-style: normal; line-height: 16px; font-weight: bold; margin: 0px; padding: 0px;}
заголовок
второй заголовок
- как видите можно и H1 укротить так, чтобы он отображался не крупнее обычного текста, и даже отступов обычных для него сверху и снизу не будет :0) За этот параметр отвечает сразу группа настроек:
line-height: 16px; - это у нас высота того пространства, в котором располагается строка. Не шрифта, а всей строки! То есть поставим его, например, 10 - получим наползание текста:
line-height: 30px;
line-height: 8px;
заголовок
второй заголовок заголовок
второй заголовок
font-weight: bold; - этот тег делает заголовки выделенными жирным
margin: 0px; - отступ от верхнего левого угла ячейки
padding: 0px; - отступ внутри ячейки от всех краев, производит почти тот же самый эффект, что и margin
margin: 0px;
margin: 30px;
заголовок
второй заголовок заголовок
второй заголовок
Теперь о том, как это все прицепляется к сайту. Хранится CSS обычно в отдельном файле, который броузер и считывает при отображении страничек вашего сайта. Чтобы CSS оказывал воздействие на содержимое странички, в начале ее вставляем вот такой вызов:
<link href="/путь/имя файла.css" rel="stylesheet" type="text/css">
прописать его надо между тегом <html> и тегом <body>. Если же большой нужды в мощной и сложной таблице стилей нет и нужно лишь единоразово подправить какой-то элемент, достаточно зачастую вставить в соответствующий тег "style="параметры" - например вот:
<table width="100%" height="410" border="0" cellpadding="14" cellspacing="0" class="txt" style="border: dashed 1pt; border-color: gray; border-top: none; border-bottom: none;">
Эта строка заголовка таблицы. Встроеный стиль в ней "убирает" верхнюю и правую границы, оставляя только левую и правую.
Вставки на стороне сервера - SSI
Что такое SSI? Это особые метки с адресом, позволяющие серверу сливать воедино несколько файлов формата .html. Именно поэтому они и называются вставки на стороне сервера - при обращении пользователя к страничке, содержащей метки, сервер автоматически на место этих самых меток подставит прописанные в метках файлы. Таким образом необходимость во фреймах отпадает - точно так же храним в одном файле наше меню, точно так же любое изменение в этом файле будет отображено сразу на всех страницах нашего сайта.
Пожалуй, единственный недостаток этой технологии - довольно ощутимая загрузка процессора машины, на которой расположен сайт. Но для проектов начального и среднего уровня это еще не проблема, а проекты профессиональные используют более изощренные технологии.
SSI очень удобны и просты в освоении. Несмотря на то что в них использовано вообще-то много всего (и время, и вычисление IP адреса клиента, получение от него данных и т.п.), начинающим все это совершенно бесполезно и я не стану углубляться в дебри - расскажу лишь самое главное, что нужно знать тем, кто хочет делать сайт без фреймов.
Вот так выглядит SSI вставка в файл, который у нас как бы "основной":
<!--#include virtual="/файл.htm" -->
в теге вставки прописываем путь и имя файла, который будем вставлять. Естественно вам придется этот вставляемый файл заранее создать и "обрезать" лишнее. Т.е. обрезаем все "вступительные теги" типа <HTML> <BODY> и т.п. - оставляем только голое содержимое - начиная например с таблицы, в которой все лежит. Начало файла вложения будет <table.. ну и т.п. Прописанное туда CSS и прочие теги - все смело удаляем, остаться должен только голый контент в таблицах.
Теперь, чтобы проверить как это работает, нам понадобится локальный сервер - ведь отборазить такие странички один броузер не сможет. Забежим вперед и изучим главу "локальный сервер", после чего вернемся и продолжим :0)
.... Ну вот, едем дальше - Запускаем нашу страничку в бродилке, проверяем все ли работает правильно. Если что-то не работает - значит вы где-то напутали в путях. Это наиболее типичная ошибка. Следует помнить что страничка собранная на SSI при сохранении ее в броузере станет монолитным "HTML", одним сплошным файлом, где в код вместо команды SSI будет вписан непосредственно код того файла к которому обращался SSI.
Локальный сервер
Сервер - это программа, помогающая бродилке увидеть размещенные на компьютере хостера сайты. Как правило она лишь контролирует чтобы пользователь не наделал там дел, ограничивая его или же наделяя возможностью воздействовать на сайт через броузер - зависит от уровня доступа пользователя и настроек сервера. Так же эти программы заведуют почтой, рассылками и т.п. Но они становятся незаменимыми, когда дело доходит до использования каких либо языков программирования или скриптов - PHP, SSI, ASPL, МySQL и прочее - все это требует наличия специальных модулей и сервера программы.
Вот этот то самый сервер мы сейчас и рассмотрим. Вернее рассмотрим то мы простенький "домашний" вариант одного из таких серверов - у провайдеров-хостеров как правило стоит Апач 2. и выше, но система эта для новичков довольно сложна.
Итак, собственно сервер.. Скачать его можно отсюда.
Устанавливаем на винт, не принципиально куда. Запускаем.
Наводим мышку на заголовок окна (синюю полоску) и жмем правую кнопку:
Заходим в "настройки". Они выполнены в виде длиннющей портянки и большинство настроек вам лучше не трогать, остановимся только на тех, которые нужны:
1. Задаем "Web-папку по умолчанию"
Это та папка, где у вас на винте хранится заготовка сайта. Выбираем ее, попутно можно задать какой-то файл что будет показан в случае набора неправильного адреса, и спускаемся ниже.
тут можно пока ничего не стаивть, но если кому не в терпежь, поясняю - cgi-bin - для CGI скриптов, если вы пользуетесь Perl или PHP вам потребуется установить интерпертатор и прописать путь к его исполняемому файлу.
Теперь главное - ткнуть в чекбокс вот этого пункта - разрешая тем самым серверу работать с SSI-инклюдами:
Затем сохраняем изменения, нажав на "Ок":
Таким образом получим полностью настроеный и готовый к работе мини-сервер. Чтобы воспользоваться им, вам надо (Не выключая программы!!!) открыть окно бродилки и набрать в ней http://127.0.0.1/ - если в пути до месторасположения вашего сайта в ы ничего не напутали, то в бродилке откроется ваш сайт, причем с работающими SSI!
Примечание: программа должна быть всключеной на всем протяжении работы с сайтом. Иначе SSI, PHP и прочее отображаться просто не будет.
JavaScript
К сожалению, Java-скрипты поддерживаются не всегда корректно разными броузерами, излишне загромождают странички и, вообще, являются чем-то вроде промежуточного звена между чистым HTML и более функциональным чем Java - PHP.
Но тем не менее, для сайтов начального уровня, чей бесплатный хостинг не дает, как правило, ни PHP, ни CGI, - JavaScript почти незаменимое средство сделать сайт поживее, динамичнее..
Я приведу тут несколько примеров скриптов, но вдаваться во все детали не буду - ведь книга-то о HTML, а не скриптах, про них можно написать отдельную, втрое большую этой, книгу.
Итак, простенький скриптик смены картинок на кнопках:
Чтобы понимать, о чем идет речь, начнем с примера -
наведи мышку на эту кнопку (да, в Мозилле и Нетшкапе фильтров-то нет - так что если ты не под плорером, то пролистывай эту главу - скрипты тебе вообще будут малоинтересны :0)):
А если при наведении мышки на кнопку та изменилась, то продолжим:
начало JavaScript`а внутри странички обозначается примерно как:
<SCRIPT language=JavaScript1.2>
(это обозначает начало скрипта и версию команд, на которых он построен)
Теперь сам скрипт:
function high(which2)
это название функции и процедура (то, что ниже):
{стандартно - открытие последовательности параметров. theobject=which2 //
назначен объектwhich2
highlighting=setInterval("highlightit(theobject)",50)
"освещение"=НазначитьИнтервал("подсветить(объект)",50)
- "50" - это, собственно, сама величина интервала.
ее можно поменять на иное значение - увидите изменения в работе скрипта.
.. и закрытие последовательности параметров:
}
функция "бледности"
function low(which2)
{
сие толкуем примерно как:
clearInterval(highlighting)
очистка интервала("освещения")
which2.filters.alpha.opacity=20
"имярёк2.Фильтруем.Альфа.засвеченность=20"
}
Функция яркости (фиг его знает что)
function highlightit(cur2)
{
if (cur2.filters.alpha.opacity<100)
если (фиг его знает что фильтрует яркость меньше 100 единиц)
cur2.filters.alpha.opacity+=20
(к фиг его знает чему фильтровать на +20 сильнее)
else if (window.highlighting)
если не так, то (запускаем освещибельность)
clearInterval(highlighting)
очищаем интервал (освещибельности)
}
</SCRIPT>
(кАнЭц скрЫпта)
примерно так.
теперь.. рассмотрим обращение к скрипту с объекта его приложения:
как известно, картинку мы указываем как
<img onMouseOver=high(this) style="FILTER: alpha(opacity=25)" onMouseOut=low(this) height=31 alt="надпись" width=88 border=0 src="путь к картинке.gif">
Читается это так:
<img - начало картинки.
onmouseover=high(this)
при наведении мышки - включить нашу функцию high (см. первый абзац скрипта)
style="FILTER: alpha(opacity=25)
стиль отображения картинки - фильтр прозрачности - 25% непрозрачности (из 100)
onmouseout=low(this)
как только курсор съедет с территории картинки - исполнить функцЫю low (найди в скрипте сам).
src="/N/srez88x31b.gif"
ну - это собсно та самая картинка,
где src расшифровываеЦЦа как сокращение от английского source
и в кавычках опосля знака "=" - тривиальный путь к картинке.
width="83" height="31" -
размеры картинки.
Если их не задать она будет отражена в масштабе 1:1, если задать не такими как родные размеры картинки, получим искажение.
alt="любой текст, который будет виден, если картинка не загрузится"
ну и закрытие тега картинки в виде непременного: >
для тех, кто в танке:
впендюриваем это
<SCRIPT language=JavaScript1.2>
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=20
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</SCRIPT>в самое начало паги прямо под тег </head>
затем берем это
<IMG onmouseover=high(this) style="FILTER: alpha(opacity=25)" onmouseout=low(this) src="/NAVI/foox88x31.gif" width="83" height="31" alt="мАя кЫнопкА :0)">
и впендюриваем на то место паги где должна быть кнопка, промеж тегов
<body>
</body>
где планируем нашу картинку.
возможные глюки:
перекосило картинку:
размеры ты указал неправильно (если картинку иную попробуешь запихать)
картинка не отображается вообще
путь к ней не верен - убедись, что страничка со скриптом в одной директории с картинкой и проверь правильно ли названа картинка. Если ты напишешь ее как pict.JPG - это не значит что она прочтется как pict.jpg!
удач в нелегком опыте :0)
да.. скрипты, как и стили лучше и правильнее хранить в отдельном файле - а вызывать его можно такой строкой сразу под строкой вызова стиля -
<SCRIPT language=JavaScript1.1 src="menu.js"> </SCRIPT>
Чуть позже выйдет книга по скриптам с кучей примеров :0)
специальные теги:
Тег title
Этот тег встречается в двух разновидностях:
<title>Заголовок</title> в самом начале страницы, задающим еткст в заголовке окна - в той синей полоске, которая оканчивается тремя классическими виндовсными кнопками "свернуть, развернуть и закрыть".
Вторая разновидность - это тег внутри самого HTML - который можно загнать в почти любой другой элемент, такой как таблица, ячейка, кнопка, изображение, или даже просто какие-то слова.
Вот на нем мы и остановимся подробнее:
- пример таблицы -
понаводите курсор на разные ячайки - в самой таблице задан один всплывающий текст, в закрашенной ячейке - другой, и наконец самой картинке - третий. При наведении на эти элементы курсора и небольшой задержке рядом с курсором будет возникать всплывающая "подсказка" с вашим текстом.
Этот тег может иметь много применений, в частности он поможет и увеличить находимость вашей странички несколькими поисковиками, но об этом в книжке по раскрутке :0)
Тег alt
Этот тег ответственен за замену картинок текстом. Дело в том, что бывает в броузере посетителя для экономии времени и трафика отключена графика, и картинок он просто не видит. Как быть в этом случае, особенно, тем, у кого меню - графическое? То есть рисованое, а не простыми гиперссылками? Вот тогда-то и пригождается этот тег, который выводит на месте незагрузившихся картинок некий текст, которым вы можете продублировать содержимое картинки или пояснить куда пользователь попадет, при нажатии на этот линк.
Вставляется этот тег в картинку:
Вот так он будет выглядеть, если картинка не загрузится.
Желательно не писать длинных многострочных предложений, а формулировать предельно четко и ясно. Также, этот тег влияет на находимость фотографий и картинок. Снабдите картинку всеми атрибутами с упоминанием "Вася Пупкин", установите ведущую на нее ссылку на одну из страничек, - и эта фотография будет находиться по запросу всех картинок "Вася Пупкин" одной из первых, нежели те фото Васи Пупкина, что не снабжено этими тегами.
Об авторе
1. ФуксЪ - это ник, а не фамилия :0) Я не представляюсь полной формой по многим причинам, которые, если совсем уж любопытно, вы всегда можете найти в моей биографии.
2. Родился я в г. Кемерово ("Кузбасс"), в молодости перебрался в Красноярск, где и вырос. Довелось пожить в Новосибе, Томске, Москве и нескольких других городах, в которых не задерживался дольше чем на пару недель, посему не упоминаю, на данный момент проживаю в Киеве (на 2002-2003 годы), но планирую перебираться опять-таки в Москву, как поднакоплю денег на обустройство там :0)
3. В сетке я провожу довольно много времени, но большую часть его посвещаю своему проекту, на данный момент находящемуся под доменом srez.ru: давно мечталось собрать что-то "для своих". Пока-что там только самое-самое начало и раскачка будет длиться еще долго, но все же надеюсь что не вечно.
4. Семейное положение: женат =0)
5. Год рождения.. ну пусть будет 1977й..
6. Любимые игрушки - 3D классика, стратегии и космуляторы (вот только времени не хватает :0\)
7. Я охотно отвечу на возникающие вопросы, если эта тема еще не освещена на моей страничке и это не потребует написания более полустраницы текста (если пришлось бы писать больше страницы, эта тема будет обязательно освещена отдельной главой соответствующего "трактата", но позже, в порядке так сказать написания).
8. По остальным вопросам, забегая вперед:
- не переношу спамеров любого сорта,
- не люблю абсурдных в своей наивной наглости предложений, которые классифицирую как тот же "спам",
- в общении по мылу и аське: охотно знакомлюсь с владельцами страничек содержательнее "привет я Вася, а это моя крутейшая страничка"..
- охотно помогу владельцам интересных проектов.
- не люблю официоз, дутых пустышек и дешовки, чрезмерно меркантильных и расчетливых, сетевое ворье, тырящее чужой контент без ссылок на источник и прочих "бизнесменов". Я не против извлечения денег (и даже за), но очень против, когда это становится основной целью.

текущее мыло - mailto:foox@srez.ru
текущая ICQ 142135666
текущая страничка: http://srez.ru/ (авторский проект)

HTML (часть 2)

Здесь находятся все тэги, которых мы касались, шагая по ступенькам (еще разрабатывается).
<a href="другой_документ.html"></a> - ссылка
target=_blank - открывает ссылку в новом окне.
name="anchor1" - имя закладки.
<area> - оперделяет геометрические области внутри карты и ссылки, связанныес каждой областью
shape="rect" (circle, poly) - тип области (прямоугольник, круг, многоугольник)
coords="x1,y1,..." - координаты, количество зависит от типа области
alt="описание" - описание, подсказка
href="document.html" - ссылка
<b></b> - жирный текст
<big></big> - крупный текст
<body></body> - обязательный тэг
<body text="#cc0000"> - задает цвет текста всего документа
<body bgcolor="#000000"> - задает цвет фона документа
<body background="картинка.jpg"> - задает фоновую картинку
<body link="#ff9999"> - задает цвет ссылки
<body alink="#ff9999"> - задает цвет активной (нажатой) ссылки
<body vlink="#ff9999"> - задает цвет посещенной ссылки
<body topmargin="0"> - определяет ширину верхнего и нижнего полей документа для IE
<body leftmargin="0"> - определяет ширину левого и правого полей документа для IE
<body marginheight="0"> - определяет ширину верхнего и нижнего полей документа для NN
<body marginwidth="0"> - определяет ширину левого и правого полей документа для NN
<br> - перенос строки (принудительный)
clear="all" (left, right) - завершение обтекания текстом объекта (картинки).
<center></center> - центрирование текста
<font></font> - сам по себе погоды не делает, всегда употребляется с одним из параметров, приведенных ниже - о тэге.
<font color="#cc0000">текст</font> - задает цвет текста выбранной части документа.
<font size="+0">текст</font> - задает размер шрифта текста (от -2 до +4)
<font face="Arial">текст</font> - задает определенный шрифт в документе (можно прописать какой-нибудь экзотический шрифт)
<frame src="menu.html"> - определяет фрэйм и его свойства внутри frameset - главы 24 - 30.
marginheight="0" - определяет ширину верхнего и нижнего полей фрэйма.
marginwidth="0" - определяет ширину левого и правого полей фрэйма.
scrolling="yes" (no, auto) - линейка прокрутки будет всегда (никогда, если надо).
name="window-1" - имя фрейма, используется для ссылки на него из других документов (фреймов), с помощью параметра тэга <a> target (target="имя_фрейма").
<frameset></frameset> - определяет фрэймовую структуру документа. Открывает и закрывает список фрэймов - главы 24 - 30.
rows="100,200,*" - определяет количество и размеры горизонтальных фрэймов (рядов). Размеры задаются в процентах или пикселях.
cols="10%,20%,70%" - определяет количество и размеры вертикальных фрэймов (колонок).Размеры задаются в процентах или пикселах.
border - определяет ширину рамок фрэймов в пикселах.
<Hx></Hx> - заголовок
<head></head> - обязательный тэг
<hr> - линия
<Hr align="right"> (center или left>
<Hr width="30%"> (ширина линии в процентах)
<Hr size="6"> (толщина линии)
<Hr NoShade> (отмена объемности)
<Hr color="cc0000"> (цвет линии, только в IE)
<html></html> - обязательный тэг
<i></i> - выделяет текст курсивом
<img src="ваша_картинка.jpg"> - рисунок
Border="5" - рамка покруг картинки
width="500" - ширина картинки
height="100" - высота картинки
align="left" - расположение текста по отношению к картинке (right, top, middle, left, bottom)
vspace="10" - расстояние от картинки до текста по вертикали
hspace="30" - расстояние от картинки до текста по горизонтали
alt="описание" - описание картинки
usemap="#karta1" - ссылка на карту
<map></map> - навигационные карты
name="karta1" - имя карты
<marquee></marquee> - бегущая строка (текста)
height="16" - высота строки
width="250" - ширина строки
bgcolor="#99CCFF" - цвет фона
vspace="10" - расстояние от бегущей строки до текста (картинок, др. объектов) по вертикали
hspace="20" - расстояние от бегущей строки до текста (картинок, др. объектов) по горизонтали
loop="2" - сколько раз прокрутится строка
direction="left" (right, up, down) - направление движения строки - влево (вправо, вверх, вниз)
behavior="scroll" (slide, alternate) - поведение строки - обычная прокрутка (прокрутка с остановкой, от края к краю)
scrollamount="1" - скорость движения строки, может принимать значения от 1 до 10 (1 - самое медленное движение, 10 - самое быстрое)
<li></li> - cписки
type="disk" - полный кружок (по умочанию)
type="circle" - полый кружок
type="square" - квадратик
<p></p> - параграф
<p align="center">текст</p> - центрирование текста.
<p align="right">текст</p> - выравнивание текста по правому краю документа.
<p align="left">текст</p> - выравнивание текста по левому краю документа.
<p align="justify">текст</p> - выравнивание текста по обоим краям документа.
<pre></pre> - форматированый текст
<s></s> - перечеркнутый текст
<small></small> - малый текст
<stike></strike> - перечеркнутый текст
 - нижний индекс
 - верхний индекс
<title></title> - название документа
<table></table> - таблицы
<tr></tr> - строчка (ряд) таблицы.
<td></td> - столбец (ячейка) таблицы.
bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки).
background="картинка.gif" - задает фоновый рисунок для таблицы (строки, ячейки).
width="50" или width="50%"- ширина таблицы (строки, ячейки) в пикселях или процентах.
height="45" или height="45%"- высота таблицы (строки, ячейки) в пикселях или процентах.
align="center" (right, left) - выравнивает содержимое ячейки относительно ее центра (правого или левого краев).
valign="middle" (top, bottom) - вертикальное выравнивание содержимого строки (ячейки) по середине (наверху или внизу).
colspan="2" - растянуть ячейку на несколько стобцов.
rowspan="2" - растянуть ячейку на несколько рядов.
cellspacing="5" - задает пространство между ячейками.
cellpadding="5" - задает пространство внутри ячейки между ее содержимым и границами.
border="3" - задает толщину рамки таблицы.
bordercolor="#000000" - задает цвет рамки таблицы.
<tt></tt> - фиксированный (моноширинный) текст
<u></u> - подчеркнутый текст
<ul></ul> - отступ (табуляция)
Итак, для начала создай на диске отдельную директорию (папку) для будущей страницы (порядок прежде всего:).
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>, не требуют закрывающего тэга. Но вернемся к нашему документу и рисунку.

<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>:
<body text="#336699">
Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным).
<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> (прим.)

Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг <br> для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <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:)
Посмотрели? - Шагаем дальше.

В этой главе мы поговорим о параграфах. Параграфы вводятся тэгом:
<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> (прим.)

Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг <br> для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <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:)
Посмотрели? - Шагаем дальше.

Теперь настала пора поговорить о том как делается курсив, подчеркнутый текст, полужирный текст и фиксированный текст:
<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>
Я думала, что глава о списках получится короткой, но как видите ошиблась:). Если не устали, то переходите к следущей ступеньке, если устали, то отдохните чуток.
- Списки (от Manual.ru)
- Списки (от Html - Начальный курс)

В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга:
Вот такая она, в форме канавочки. У линии есть много разных параметров:
(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях)
(3) <Hr size="6"> (толщина линии)
(4) <Hr NoShade> (отмена объемности)
(5) <Hr color="cc0000"> (цвет линии, только в IE)
Вот и вся премудрость с линиями. Естественно, эти параметры могут употребляться одновременно.
Не злоупотребляейте параметром Color, т.к. он действует только в Интернет Иксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия:). О параметрах картинок говорится в главе 10).
Не считайте линию изжившей себя, я думаю как элемент дизайна она может быть вполне полезной.
У нас осталась еще одна главка, после которой мы перейдем к таблицам.

Эта глава о спецсимволах. Они не так часто употребляются, но тем не менее они необходимы:
(1) - &lt; - <
(2) - &gt; - >
(3) - &quot; - "
(4) - &nbsp; - пробел
(5) - &amp; - &
Т.к. все заключенное между < и > броузер воспринимает как тэг, то , чтобы ввести символ скобки в текст для него придумали спецсимвол (1 или 2). Теперь вы знаете на какой мучение я была обречена, когда начала писать это руководство, ох уж эти примеры:)
Кавычка (3). В принципе не обязательно ее так прописывать, броузеры понимают этот значок прекрасно, но кто знает: береженного - бережет.
Символ пробела (4). Зачем он нужен? Ну, допустим вам понадобилось пять пробелов подряд, а тэг <pre> с его принудительным переносом строки вам вовсе не нужен, вот тогда поймете, ведь спецсимвол пробела можно написать хоть тысячу раз:).
Но тут существует одно но:
слово1&nbsp;слово2&nbsp;слово3 = слово1 слово2 слово3
Ни одно из этих слов не перенесется на другую строку без двух других, и хотя посетитель увидит обычную фразу, где между словами стоит пробел, но по идее это же одно длинное слово, а не три, т.к. &nbsp; - неделимый символ пробела:) - учтите и используйте с умом.
И последний символ &, т.к. он несчастный используется для написания спецсимволов, то для него добрые люди тоже придумали спецсимвол &amp; (бр..:).
Спецсимволы не надо включать ни в какие тэги, надеюсь вы это поняли, считайте их просто текстом.
Вот такая это сложная штука жизнь %)

Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Например, Постройка.ру (родной сайт учебника) не обошлась бы в своем оформлении без таблиц никак. Или вот еще пример, сайта, оформление которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда пройдете главы о таблицах без труда сможете сверстать подобное).
Таблица задается тэгом:
<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 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:
Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром 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>
И... готово!:)
В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). И тэги, которые мы применяем для форматирования текста - все те же.
Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке.
Давайте шагнем на следующую ступеньку и продолжим разговор о таблицах.
В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах 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>
Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Вернемся к нашему примеру: теперь мы почти получили то, что хотели:)

В предыдущих главах мы научились создавать таблицы на конкретном примере, а в этой главе я хотела разом вывалить все оставшиеся возможности и аттрибуиы на ваши головы, но потом решила, что раз уж я пишу подробный учебник, то надо быть стойкой до конца:).
Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим аттрибутом - 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>
Теперь я могу с чистой совестью завершить этот урок и перейти к следующему, в котором мы узнаем о вложенных таблицах.

Когда мы учились делать таблицы, то я упоминала о вложенных таблицах. Что же это такое и в чем их особенность? - это обычные таблицы, которые располагаются в ячейках другой таблицы, и больше ничего особенного в них нет... почти.
Допустим у нас уже есть большая таблица, две колонки которой забиты текстом какого-то отчета, а третья между ними для красоты:
Итак, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу. Теперь код: <table>
<tr>
<td width="200" valign="top" background="blue.gif" align="center">С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td>
<td width="10" background="white.gif">&nbsp;</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">&nbsp;</td>
Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку мы ввели для красоты. Чтобы ячейка не пустовала, в нее введен &nbsp; (символ неразрывного пробела). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: <td></td>. Вот такую конструкцию NN просто напросто игнорирует, т.к. не любит пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или &nbsp;, или мелкую картинку 1х1 пикселов.
И последняя зайка: align="center" (right, left). Помните, мы уже говорили о параметре align, так вот, как видите, его можно задать для содержимого ячейки (см. наш пример), только вот удобного align="justify" тут нет.
Вот, пожалуй, и все. Охота за зайками переноситься в следующие главы.

В этой последней главе, посвященной таблицам, мы поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям:
<table border="3">
Остальную таблицу допишете сами.
Нашей рамке мы можем задать цвет. Пусть он будет черный в нашем примере:
<table border="3" bordercolor="#000000">
Вот и вся премудрость. В руководствах и справочниках вы можете встретить параметры bordercolorlight и bordercolordark - эти параметры понимает только ИЕ (Internet Explorer), поэтому не рекомендую их употреблять. Вобще-то не так трудно создать таблицу, гораздо труднее, чтобы это выглядело под разными броузерами одинаково. Возьмем те же рамки:
Я советую по возможности проверять, как выглядит ваш документ под разными броузерами и разрешениями, т.к. при этом могут проявиться такие дефекты, о которых вам доселе было неведомо. Конечно, можно махнуть рукой на пользователей 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> (прим.)
Вот так. Ничего сложного здесь нет:)

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

Вот мы добрались и до последней главы о фреймах. Здесь мы поговорим об IFrame - "плавающем" фрейме и вы получите несколько полезных ссылок напоследок.
Я не буду рассказывать, как делается IFrame (т.к. "плавающие" фреймы поддерживаются только IE), я лишь расскажу, что это такое.
Итак, IFrame - "плавающий" или встроенный фрейм. Пользователи Интернет Искплорер, наверное, много раз встречали его на различных сайтах. Это очень удобно, поэтому некоторые создатели страниц (сайтов) позволяют себе забыть о пользователях Несткейпа, и я их прекрасненько понимаю.
Зайдите на Дефорум.ру. На заглавной странице Новости сделаны при помощи IFrame. Т.е. мы видим, что IFrame позволяет нам вставить в наш документ, другой документ (в нашем примере документ с новостями), мы можем раположить встроенный фрейм по отношению к другим элементам документа (тексту и картинкам) как нам хочется (IFrame имеет фиксированные, неизменяющиеся размеры, поэтому ничего никуда не уползет и не раcширится), и мы также видим, что IFrame - это действительно очень удобно.
Что? Я виду досаду на твоем лице читатель :), тебе хочется узнать как создавать такую замечательную штуку, и ты думаешь, что в этот раз я могла бы отступить от принципа "видно подо всем". Нет уж. Я не особо вредная, но в этот раз буду, не сколько из принципа, сколько мне хотелось бы, чтобы читатель начал сам искать разную информацию по теме, ведь я в учебнике могу дать только основу и дополнительный материал ввиде ссылок и примечаний, а более глубоко придется все же погружаться самим.
Теперь обещанные ссылки:
- Страшный всемирный заговор - почему фреймы не так страшны
- Я люблю фреймы
- Фреймы как альтернативное средство навигации
- Встроенные фреймы : элемент IFRAME
На этом повествование о фреймах закончено, дальше пойдут Дополнительные главы.

На ступеньке 8-ой мы говорили о разных способах выделения текста (курсиве, полужирном шрифте, подчеркивании и других). Эту главу вы можете считать своеобразным продолжение 8-ой главы.
Какие же еще теги определяют стиль шрифта, используются для его форматирования? Это - 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
Нижний индекс _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>
Теперь сами пропишите 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 - Вы можете не мучаться с картами, а найти на просторах интернета специальную программу, с помощью которой вы без труда сможете карту расчертить, и не прописывать все вручную - это может сэкономить ваше время, силы, нервы.
Надеюсь, с картами вам теперь все ясно, и вы можете продолжать обучение :)

В этой главе мы продолжим разговор о ссылках. Иногда возникает такая ситуация: нам нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем (смотрите пример, понажимайте там на ссылочки). Такая навигация внутри одного и того же документа весьма удобна. Создаваться она может двумя способами.
Способ первый - с помощью атрибута name (имя закладки) тега A:
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3><A name="stih1">Стих первый</A></H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3><A name="stih2">Стих второй</A></H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3><A name="stih3">Стих третий</A></H3>
<PRE>
... тра-ля-ля 3...
</PRE> (прим.)
Заголовки (стих первый, стих второй, стих третий) в нашем примере мы сделали закладками, использовав параметр тега A - name:
<A name="stih3">Стих третий</A>
Затем, без стеснения, мы сделали на них ссылки:
<A href="#stih3">Ссылка на стих третий</A>
Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:
<A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A>
или
<A href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих третий из какого-то другого документа </A>
Способ второй - есть такой атрибут (параметр) - id, который назначает тегу (элементу) уникальное имя в пределах одного документа (кроме тегов Base, Head, Html, Meta, Script, Style, Title). Что мешает нам задать id, например, тегу H3 (заголовкам)?
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3 id="stih1">Стих первый</H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3 id="stih2">Стих второй</H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3 id="stih3">Стих третий</H3>
<PRE>
... тра-ля-ля 3...
</PRE> (прим.)
Посмотрите, внешне ничего не изменилось и все действует так же, как и в первом примере, поэтому вы можете использовать спокойно любой из этих двух способов (какой больше нравится).
Также хочу вас преостеречь, никогда не делайте так:
<A href="#stih">Ссылка на ...</A><BR>
...
<A name="STIH">Закладка</A>
Если вы, например, напишите имя закладки большими буквами, а ссылаясь укажете это имя маленькими, то броузер может посчитать это за два разных имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и пишите имена в одном регистре.
На этом мучения с закладками закончены, а напоследок ловите две ссылочки:
- Не взлетим, так поплаваем. Уберите якоря со своих сайтов
- Анкор, еще анкор
- Koje-shto pro jakorja.

Наверное, пройдясь по ступенькам, вы уже поняли, что некоторые теги и некоторые атрибуты (параметры) тегов поддерживаются не всеми броузерами. Не будем искать причин почему (да и откуда мне лично знать, что толкает производителей броузеров придумывать свои специфические теги или атрибуты, о которых в спецификации нет ни слова, а также мне неведомо почему броузеры не поддерживают некоторые теги и атрибуты, которые по идее должны поддерживать, т.к. в той же спецификации эти теги и атрибуты упомянуты), лучше поговорим о некоторых специфических атрибутах для тега Body, которые вам когда-нибудь да пригодятся.
В главе 28-ой мы говорили о атрибутах тега <frame> marginheight (определяет ширину (в пикселах) верхнего и нижнего полей фрэйма) и marginwidth (определяет ширину левого и правого полей фрэйма). Подобные атрибуты можно задать и для тега Body, что весьма полезно, если вы хотите убрать поля, которые есть всегда по умолчанию (см. пример, вот они какие эти отступы (поля) по умолчанию), или наооборот, увеличить их.
Давайте, в наших примерах мы будем рассматривать вариант, когда нам нужно убрать поля документа:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0">
Topmargin - определяет ширину верхнего и нижнего полей документа, leftmargin - определяет ширину левого и правого полей документа. Чтобы убрать поля мы приравняли эти параметры к нулю. Можете посмотреть, что у нас получилось.
Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer.
Но не стоит расстраиваться, Нетскейп не окажется за бортом, т.к. для этого броузера есть свои аналогичные специфические параметры для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.
Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти параметры:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Таким образом и в IE все будет хорошо, и NN будет не обижен.
Традиционная ссылка на дополнительный материал:
- Специфические теги, поддерживаемые только браузером Internet Explorer или только Netscape
- Волшебное заклинание (заметки о полях)

В этой главе мы продолжим разговор о специфических тегах, и на этот раз речь пойдет о теге Marquee - бегущей строке (текста).
Тег Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. сия болезнь массовая, то мне придется рассказать подробно о теге Marquee (те у кого броузер не IE будут в этой главе оставлены за бортом, т.к. не будут видеть примеров, хотя традиционная ссылка в конце может их утешить).
<marquee height="10" width="270" bgcolor="#99CCFF">
Бегущая строка, высота - 10, ширина - 270 пикселов, фон - 99CCFF
</marquee>Как видите, все просто. Все атрибуты вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.
Также для бегущей строки можно задать и другие знакомые вам атрибуты - hspace, vspace и align (те, кто их не помнит срочно возвращаются к главе 10-той и освежают свою память). В наш пример я их вводить не буду, вы можете сами.
<marquee height="10" width="270" loop="2">
Бегущая строка
</marquee>
Параметр loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза.
Далее будут лишь описания параметров без примеров, подставляйте их сами в пример, и смотрите, что будет получаться.
Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).
Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
Уф! Все :)
Теперь, когда мы разобрались со всеми параметрами тега Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тегом. Вернитесь хотя бы к первому примеру. Посмотрите на него задумчиво и признайтесь, что он мешал вам сосредоточиться на чтении и ознакомиться с этой главой (да, все со злым умыслом). Посмотрели, поняли, к чему я веду, и решили в дальнейшем не мучать своего посетителя подобным образом без особой нужды.
Обещанное утешение пользователям Netscape и других броузеров, которые не IE - ссылка на скрипты бегущей строки. Я полагаю, что это вы сможете увидеть (кстати, это альтернатива Marquee):