Об этой книге
Несколько лет тому назад, когда я только-только вылез в сеть, я интересовался только играми, затем открыл для себя чаты, затем когда устал отвечать на одни и те же вопросы - решил сделать себе страничку, какие были у большинства тех, с кем я общался. Так я открыл для себя 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>
<sub>нижний индекс</sub> и <sup>верхний индекс</sup>
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="100" border="0" height="100" cellspacing="4" cellpadding="0" bgcolor="#999999">
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </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. По остальным вопросам, забегая вперед:
- не переношу спамеров любого сорта,
- не люблю абсурдных в своей наивной наглости предложений, которые классифицирую как тот же "спам",
- в общении по мылу и аське: охотно знакомлюсь с владельцами страничек содержательнее "привет я Вася, а это моя крутейшая страничка"..
- охотно помогу владельцам интересных проектов.
- не люблю официоз, дутых пустышек и дешовки, чрезмерно меркантильных и расчетливых, сетевое ворье, тырящее чужой контент без ссылок на источник и прочих "бизнесменов". Я не против извлечения денег (и даже за), но очень против, когда это становится основной целью.