 |
 |
Пример:
<p> Это первый параграф </p>
<p> Это второй параграф </p>
<i><b> Тут текст </i></b>
будет неправильным, а :
<i><b> Тут текст </b></i>
правильно.
<html>
<body>
<p>Простейший документ.
</body>
</html>
Попробуйте набрать этот пример в NotePad
'е и записать в файл d:\apache\htdocs\index.html, А затем
уже в браузере наберите http://localhost/, я надеюсь, что вы
догадаетесь перед этим запустить Apache ;-).
Цвет в этих параметрах задается в следующем формате:
#RRGGBB
где R (red - красный), G (green - зеленый), B (blue - синий)- это
составляющие компоненты цвета в шеснадцатеричной форме. Например,
если вам надо получить зеленый цвет, для которого составляющие красного
и синего нулевые, то вы должны записать #00FF00. И таким образом можно
получить все 16 млн. цветов, которые научились воспроизводить современные
мониторы.
Если у Вас с шеснадцатеричной арифметикой не впорядке, но Вы к счастью подкованы знанием английских названий цветов, то используйте их. Давайте рассмотрим примерчик:
<html>
<body bgcolor=#FFFFFF text=black link=blue vlink=#00FF00
alink=red>
<p>Второй простейший документ.
</body>
</html>
В этом примере цвет фона документа будет белым,
так как все составляющие имеют максимальные значения, вместо #FFFFFF
можно было написать white (белый). Далее идет цвет символов, он у
нас черный. Ссылки будут синими (#0000FF - blue), а на которые мы уже сходили
выделятся зеленым (#00FF00 - green),
ну а активные будут вообще красными
(#FF0000 - red). Естественно гамма не для слабонервных, но это всего
лишь пример :-). Что умеет <head> ?
Я специально не стал вводить ее сразу, потому как об "этом" лучше было написать целый шаг. Что я и делаю :-).
Вот какая структура у более сложного документа :
<html>
<head>
......
</head>
<body>
<p>Более сложный документ.
</body>
</html>
Опять же не указываю что внутри <head>...</head>,
потому как надо все по порядку.
Элемент <title>...<title>
Этот элемент должен находиться внутри раздела <head>. И вообще давайте разделим структуру нашего документа на две части : заголовок и тело документа.Так вот <title> должен находиться только в заголовке, и не может находиться в теле документа.
Как вы, наверно, уже догадались этот элемент сообщает название документа браузеру. Это название, например Explorer или Navigator отображают в названии окна.
Example :
<head>
<title> Это название документа !!! </title>
</head>
Элемент <meta>...</meta>
Ну этот элемент вообще может помоему все, что угодно. Он определяет для документа набор свойств, которые задаются в виде имя/значение. В качестве этих свойств могут выступать: имя автора, список ключевый слов, дата окончания существования (в кешах прокси серверов) и еще очень многое. А теперь по порядку. Все свойства задаются
через название параметра указываемого в NAME , либо
если у этих названий есть эквиваленты в протоколе Http,
то они задаются в через
HTTP-EQUIV, а далее в CONTENT их содержание.
Стандартные значения name:
<meta name="Author" content="Bill Gates">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
А вам охото, чтобы это было в ваших документах
??? На самом деле, если это вдруг откуда ни возьмись появится это
(хотя всем известно отчего оно появляется :-), то удаляй не удаляй
это клеймо все равно по структуре документа видно, что здесь чего-то
не хватает, а именно этой подписи !!! Ну вы скоро поймете о чем это
я :-).
<meta name="keywords" content="А тут каля маля для запутывания
робота, причем размер может быть очень большим !!! Хахахаха">
Ну я даже не знаю, что можно сказать об этом
элементе дополнительно, так как он жрет очень много места, и я его
никогда не использую. Многие вебмастера настолько любят этот элемент,
что его содержание порой превышает размер самой страницы в два или
три раза :-). Да еще и вставляют туда то, о чем их сайт вообще не
рассказывает. Например у них сайт про Верхнюю Одежду, но в списке
появляется то от чего волосы шевелятся, и супер порно, и супер халява,
всякие кряки и взломы и вообще неизвестно еще что. Зато народ ходит
:-).
Ну впринципе я думаю для вас вполне хватит и этих свойств, хотя их количетво и названия ничем не ограничены, и если вам хочется забить страничку мусором, то лазьте и смотрите как это делают другие :-).
Надеюсь Вы еще на забыли, что мы еще не рассмотрели параметр HTTP - EQUIV ? Если нет, то вот какие опять же основные названия и параметры:
<meta http - equiv="Content-Type"
content="text/html; charset=windows-1251">
Слова text/html - это тип
содержания документа, т.е. это есть текст в формате ХТМЛ.
Далее charset - это кодировка символов, она может
принимать очень много значений: windows-1251, koi8-r, ISO-8859-1 и т.д. (я если чесно даже не знаю все :-).
<meta http - equiv="cache-control" content="no-cache">
<meta http - equiv="expires" content="Tue, 02 Jan 1996 01:00:00 GMT">
Тут скажу только, что свойство Expires
заставляет веб сервер выдавать строку в заголовке протокола
Expires: Tue, 02 Jan 1996 01:00:00 GMT
Ну это уже на усмотрение браузера, что с ней
делать, а лично мне она не нужна.
Ну вобщем все пока об разделе <head>. Хотя тут еще очень важно (как я уже отмечал) сказать, что в принципе он не нужен, и первый пример структуры документа вполне работоспособный. Хотя заголовок не плохо было бы иметь, чтобы сообщить радостному браузеру свое название и кодировку текста. А кодировку текста действительно лучше сообщить, чтобы новичок в интернете, зайдя на вашу страницу не обнаружил у себя на экране некое подобие китайских ероглифов.
Ну вот вроде и все.
Оформление документа (абзацы, заголовки и шрифты).
Для этого язык html представляет просто неограниченные возможности и простоту выполнения.
Элемент <p>...</p>
Этот элемент используется чаще всего, и наверно только поэтому называется так коротко :-). P - это от слова paragraph (параграф или абзац). Все содержимое этого элемента, т.е. то что помещается внутри <p>...</p>, отделяется от другого содержимого страницы несколькими пустыми строками.Пример:
<p>Абзац первый</p>
<p>Абзац второй
Надеюсь вы обратили внимание, на второй абзац,
и нашли отличие от первого ? Если нет то задержите на этом примере свое
внимание. Ну что теперь нашли ? Правильно, я не поставил закрывающую
скобку </p>. А ее можно и не ставить, таким образом облегчая
себе жизнь :-).
Абзацы, как и во всех нормальных редакторах текста можно выравнивать. Т.е. задавать выравнивание по левому или правому краю, а также естественно по центру.
За это отвечает атрибут align, который может принимать значения left, right и center.
Это выравнивание по левому краю.
Это по центру.
Ну и по правому.
Кроме этих выравниваний существует еще одно, которое поддерживает пока только Explorer, это justify - выравнивание по правому и левому краю. Когда вы размещаете большие тексты пользуйтесь этим параметром, т.к. таким образом выравненный текст выглядит намного красивее.
По умолчанию все абзацы выравниваются по левому краю, если конечно этот параграф не является вложенным в другой блок, выравнивание которого другое.
Заголовки
Заголовки как вы понимаете тоже имеют огромное значение, и поэтому их аж шесть типов. Различаются они размером букв и <h1> - самые большие, а <h6> - самые мелкие.
Пример:
<h1>Это самый здоровый заголовок :-)</h1>
...
<h6>А это самый мелкий </h6>
А вот как все это выглядит :
Это самый здоровый заголовок :-)
...А это самый мелкий
Интересно, Вы там еще глаза не сломали от нижнего заголовка :-).
Заголовки, как и абзацы можно выравнивать таким же способом, через align.
Установка шрифта
Для использования разных шрифтов, цветов и размеров в языке html, есть тег <font>. У него есть следующие параметры:
<html>
<p>А это шрифт : <font face="Arial">Arial</font>
</html>
В этом примере слово Arial
будет отображаться шрифтом Arial. Насчет этого параметра
хочется сказать одно : старайтесь обходиться без него. Это конечно
хороший параметр, так как он делает более оригинальной страничку,
НО помните, что у посетителя вашей странички может и не оказаться
этого шрифта, и кроме того, почему вы должны использовать шрифты Windows'а,
если люди сидят в интернете и из под Unix'а и из под
OS/2, и вообще (как это не парадоксально) еще сидят
в DOS'е в текстровых режимах. Формат Html
вообще свободный и не стоит его привызавать к определенной платформе.
<html>
<font size=7>Size 7</font>
<font size=3>Size 3</font>
<font size=+2>Size +2</font>
<font size=-1>Size -1</font>
</html>
В этом примере отобразятся надписи различной
высоты. Если вы обратите внимание на две предпоследние строчки, то
вы увидите, что я использовал в размере знак. Таким образом указываются
относительные размеры шрифта, т.е. если размер вашего шрифта был 5,
то при записи +1 размер шрифта станет 6, и также с минусами. Но если
у вас был шрифт 3, и вы указали +5 или -4, то размер у вас не будет
8 или -1, а максимальный и минимальный, т.е. 7 и 1. Но старайтесь
не делать таких ошибок.
Для установки базового шрифта на странице используется тег <basefont>. Параметры у него такие же как и у <font>.
<html>
<basefont size=4 color=red face="Arial">
.....
<p>
<font size=-1 color=black face="Times Roman">
А это другой шрифт !!!
</font>
.....
</html>
Небольшой комментарий. <basefont> не должен иметь закрывающую скобку. Его лучше располагать в начале документа, но если вам нужно действие на определенном участке текста, то можете использовать его внутри него. Так как этот тег определяет базовый шрифт, то в примере размер шрифта будет откладываться от 4, т.е. 4-1=3 - это будет размер шрифта для надписи "А это другой шрифт !!!". Как правило по умолчанию , т.е. если вы не используете <basefont>, базовый шрифт будет размером 3. И еще, цвет вы можете указывать просто в <body> для простоты.
Оформление документа (продолжение)
Давайте продолжим !!!
Элемент <big>...</big> и <small>...</small>
Чтобы не пользоваться длинными тегами типа <font size=+1>...</font>, предусмотрен тег <big> , который увеличивает размер текста на единицу. Аналогично <small> уменьшает текст на единицу относительно текущего размера. Они очень удобны.Элемент <sub>...</sub> и <sup>...</sup>
Эти элементы для тех кто очень любит всеразличные формулы, которые просто не могут обойтись без индексов и степенейПример
C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9
А вот как все это выглядит :
C2H5OH или 32=9
Классно правда ??? (только первым не злоупотребляйте :-)
Элемент <b>...</b> и <strong>...</strong>
Эти два элемента по идее должны выполнять разные функции, т.к. попросту названия их различаются, но до сих пор я не видел ни одного браузера, который это делает.В - сокращение от bold, отображается попросту жирным шрифтом.
Пример:
<p>А это <b>жирный шрифт</b>
Аналогично strong, вроде бы от слова
"сильный", и как спрашивается нам "усилить" текст ??? Ответ: выделить
жирным :-).
Так что результат этих тегов будет одним и тем же. Но вот только всеми "любимый" Front Page почему то предпочитает второй вариант - <strong>, тем самым увеличивая размер вашей странички и моей ненависти.
Рекомендация одна: забудьте про <strong> !!!
Элемент <i>...</i> и <em>...</em>
Ну тут аналогично, как и в предыдущем случае. Оба они, как правило выполняют одну и ту же функцию, отображают текст наклонным. I - от слова Italic (наклонный шрифт).
<p>А это <i>наклонный шрифт</i> и <b><em>жирный наклонный</em></b>
А вот как все это выглядит :
А это наклонный шрифт и жирный наклонный
Вы не поверите, но Front Page и тут предпочитает рассыпать ровным толстым слоем <em> (специально проверил :-).
Элемент <u>...</u>
Ну хоть тут нет второго лишнего (хотя лишний третий :-). Буквочка U от слова Underlined, т.е. как вы наверно догадались это попросту подчеркивание. Ну и пример (как же без него то :-)
<p><u>Подчеркнуть</u> - ничего проще !!!
Ну демонстрировать не буду, место жалко :-),
а лучше скажу, что старайтесь его избегать, т.к. ссылки в документах
тоже подчеркиваются, и скорее всего посетители вашего сайта будут путаться,
и ломать кнопки мышке :-).
Элемент <s>...</s> и <strike>...</strike>
Опять двойной :-). Отображает зачеркнутым шрифтом. Зачем нужен не понимаю. А вы интересно будуте текст черкать ? :-). Кстати и тут Front Page дал, такого элемента вы там и не найдете :-), да и ненужен он вовсе, по причине (см. выше на строку).
Элемент <tt>...</tt>
Это имитация телетайпного текста, т.е. текста с постоянной шириной символа.Пример:
<p>Текст из <tt>ТЕЛЕТАЙПА</tt>
Никогда им не пользовался, но может пригодится.
Элемент <pre>...</pre>
Вот этот элемент очень хороший, во-первых отображается с постоянной шириной символа, во-вторых не пропускает пробелы, табуляции и переносы строк, тем самым оставляя первоначальное состояние текста, т.е. предварительно отформатированный текст. Пример:
<pre>
1 2 3 4 5
это будет классно выглядеть
</pre>
А вот как это смотрится:
1 2 3 4 5
это будет классно выглядеть
Этим элементом переполнена эта страница, т.к. все примеры я делаю с помощью него. В принципе я бы отнес к минусам постоянную ширину символа, но вроде как пока никто особо не жаловался. Не нравится используй другое !!! Внутри него почему-то не рекомендуют использовать IMG, BIG, SMALL, SUB, SUP и FONT, но помоему это бред полный !!!
Элемент <div>...</div> и <center>...</center>
Элемент <div> создает новый раздел в документе. Чаще всего служит просто для задания выравнивания текста из больших кусков. Для этого используется атрибут align, который как раз и задает выравнивание внутри раздела.Пример:
<div align=right>
<p>Абзац справа 1
<p>Абзац справа 2
<p>Абзац справа 3
</div>
Если не было бы этого элемента, то вам скорее
всего бы пришлось писать в каждом абзаце <p align=right>.....,
что естественно нудно и большевато. Как ни странно Front Page
именно так и делает :-).
Для простоты был введен элемент <center>, который полностью анологичен <div align=center>, только короче :-) !!! Непонятно почему же тогда нет элемента <right> ??? Интересно !!!
Элемент <blockquote>...</blockquote>
Используется для приведения цитат, и выделяется увеличенным отступом с двух сторон.Пример:
<blockquote>
А вот цитаты то побольше я и не нашел :(
</blockquote>
Я его изредка использую для получения отступов
по краям, чтобы текст не сливался с рамкой окна браузера, а так вообще
он больше для цитат подходит.
Элемент <hr>
Этот элемент вычерчивает горизонтальные линии. Имеет следующие параметры:- align
- Определяет выравливание линии в документе. Значения как обычно. По умолчанию линия отображается шириной во все страницу, и поэтому ее выравнивание не будет заметно.
- noshade
- Этот атрибут используется для вывода линии в виде полосы одного цвета. По умолчанию она отображается в виде канавки.
- size
- Устанавливает высоту линии в пикселах.
- width
- Устанавливает ширину линии в пикселах или в процентах от ширины
внешнего элемента.
Вот как выглядит:<hr width=80% align=left> <hr width=50% align=center size=10> <hr width=150 align=right noshade>
Элемент <br> и <nobr>...<nobr>
Почему то все время забываю рассказать об этих элементах, и даже вспомнил о них когда, уже этот урок положил на сервер, хотя сам их постояннно, если не ежеминутно использую. Бывают вот провалы в памяти :-).
Элемент <br> - от break line служит неким переносом строки в языке Html, и помогает начать новую строку не прибегая к <p>, который дает большой отступ от предыдущей строки.
Пример:
<p>Пораз-<br>рываем стро-<br>ку.
Вот как выглядит:
Пораз-
рываем стро-
ку.
Элемент <nobr> совершенная противоположность, и кроме того еще должен иметь закрывающую скобку </nobr>. Он сообщает браузеру о том, что текст который находится внутри него ни в коем случае нельзя переность, даже если в окно на каждую строку может уместится не больше одного слова. Иногда он бывает полезным при графических оформлениях, но как правило используется в самих текстах редко.
Оформление документа (списки)
Ненумерованные списки
В html есть два, вернее три вида списков, и первый это ненумерованный. Называется так от того, что каждый элемент списка выделяется не своим порядковым номером, а просто жирной точкой или квадратом. Ну вы все сами увидите.Ограничивающими скобками для ненумерованного списка являются <ul>...</ul>, внутри которых он собственно и размещается. Каждый элемент списка, дабы его отделить от остальных, ограничивается скобками <li>...</li> (list item). Для краткости закрывающую метку можно не использовать.
Пример:
<ul>
<li>Первый элемент списка
<li>Второй элемент списка</li>
</ul>
Вот как выглядит:
- Первый элемент списка
- Второй элемент списка
Пример:
<ul type=square>
<li>1 element
<li type=disc>2 element
<li type=circle>3 element
<li>4 element
</ul>
И вот как это выглядит:
- 1 element
- 2 element
- 3 element
Нумерованные списки
Эти списки позволяют вам пронумеровать каждый элемент, причем это может делаться обычными и римскими цифрами, а также буквами.Ограничивающие скобки для таких списков <ol>...</ol>. Атрибут type задает как раз тип нумерации:
- type=1 задает тип нумерации арабскими цифрами 1,2,3,...
- type=a задает тип нумерации латинскими буквами a,b,c,...
- type=A задает тип нумерации латинскими заглавными буквами A,B,C,...
- type=i задает тип нумерации римскими цифрами в нижнем регистре i,ii,iii,iv,...
- type=I соответственно римскими цифрами в верхнем регистре I,II,III,IV,...
Здесь также можно применять атрибут COMPACT.
Списки могут иметь более сложную структуру, т.е. быть вложенными. В таких случаях браузеры сами меняют тип нумерации списков, чтобы они различались.
Списки определений
Эти списки отличаются от двух предыдущих по своех структуре и организации. Используются для описания определений и терминов.
<dl>
<dt>Teрмин 1<dd>Определение первого термина.
<dt>Teрмин 2<dd>Определение второго термина.
</dl>
Вот как выглядит:
- Teрмин 1
- Определение первого термина.
- Teрмин 2
- Определение второго термина.
В оформлении документов списки играют большую роль, так как в большинстве случаев на странице приходится очень много всего перечислять (ссылки, краткие оглавления, какие-то разновидности предметов и т.д.). Многие почему то предпочитают сами создавать оформление для списков, в виде шариков, стрелок, каких-то точек под стиль своех страницы, но мне лично кажется особого стиля они не предают, а вот места "жрут" много, так как каждая лишняя картинка увеличивает размер файла на 15 и больше байт. Вы в праве решать, что вам использовать, и если вы думаете что время потраченное посетителями с лихвой оплатится хорошим оформлением, то флаг вам в руки :-).
Ой, сколько картинок !!!
Форматы изображений
Изображения в интернете бывают разных форматов. Самыми признанными и распространенными среди них являются GIF, JPG.
Формат GIF позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, т.е. изображение записывается без каких-либо преобразований.
Формат JPG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое можеть иметь 7 уровней качества (от очень плохого до наилучшего).
В интернете сейчас начинают применять новый стандарт PNG, но он пока мало распространен. Он позволяет создавать изображения в 16 млн. цветов без потери в качестве. Но из-за этого занимает намного больше места, чем JPG.
Тег <img>
Этот тег вставляет в документ изображение. Источник изображения указывается в атрибуте src. Им служит как правило путь относительно текущего документа, но можно использовать вместо пути его URL в Internet'е. Закрывающая скобка запрещена.
<html>
<base href="http://www.mjk.msk.ru/~dron/images">
<p><img src="prob.gif">
<p><img src="../banner.gif">
<p><img src="http://www.rambler.ru/dronban.jpg">
</html>
Так как я специально указал тег <base
href=...>, то первая картинка будет загружаться из http://www.mjk.msk.ru/~dron/images/prob.gif.
Вторая уже будет загружаться из каталога высшего уровня, т.е. в данном
случае прямо из http://www.mjk.msk.ru/~dron/. Последняя картинка
демонстрирует возможность загрузки картинок с других сайтов, и загрузится
с сайта http://www.rambler.ru/. Эти названия изображений даны
только для примера и на самом деле не существуют !!!
Кроме атрибута src существуют еще несколько атрибутов:
- alt
- Этот атрибут задает текст, который будет изображаться вместо картинки,
если она не загрузилась или не отображается. Этот текст также выскакивает
в всплывающей подсказке. Как правило в тексте указывается краткое
описание изображения или ссылки, а также иногда содержит в себе
название файла с его размером.
Пример:
Большинство атрибутов в html не требуют заключения в кавычки, но атрибут alt лучше ограничивать, т.к. он может содержать пробелы и разделительные знаки, которые браузер не сможет обработать.<img src="pic1.gif" alt="Рисунок 1. Пример вращения твердого тела."> <img src="b.jpg" alt="b.jpg (1340b)">
- lowsrc
- Источник изображения низкого качества или размера, для быстрой предварительной загрузки.
- align
- Задает выравнивание изображения относительно текущей строки :
align=top Выравнивает верхний край изображения по верхнему краю текущей строки.
align=middle Выравнивает центр изображения по базовой линии текущей строки.
align=bottom Установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки.
align=left Выравнивает изображение по левому полю.
align=right Выравнивает изображение по правому полю. - width и height
- Эти атрибуты задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место.
- border
- Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то для толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0.
- vspace
- Используется для указания ширины пространства сверху и снизу от изображения в пикселах. Как правило по умолчанию равно 0. Но может быть и иным.
- usemap и ismap
- Устанавливают на картинку карты ссылок, на которых я остановлюсь подробнее в следующих шагах.
Изображения на страничках имеют очень большое значение для современного интернета, т.к. без них немыслим хороший дизайн и оформление. Но хотелось бы чтобы были разумные рамки в их использовании, потому что каждое изображение увеличивает и размер страницы и время полной загрузки. Любое более менее крупное изображение занимает на порядок больше места, чем та же самая страница, которая его использует. Поэтому более 80% всего размера сайта принадлежит именно им.
Я больше чем уверен, что у вас отключены картинки в браузере, чтобы увеличить скорость загрузки. И поэтому сами думайте и создавайте себе рамки при их использовании. Уделяйте больше внимания текстовому содержанию сайта, т.к. информации изображения несут в себе мало, а посетители ходят именно за ней. Не буду выдвигать лозунг "Долой Изображения !!!", как это сделал Артемий Лебедев (знаменитый вебмастер РуНета), но возможно такой лозунг будет как нельзя кстати при переоценке и переориентировке ваших ценностей.
Бросаем якоря.
exam1.html
<html>
<body text=black bgcolor=white link=red vlink=green>
<p>Первый документ
</body>
</html>
exam2.html
<html>
<body text=black bgcolor=hite link=blue vlink=yellow>
<p>Второй документ
</body>
</html>
Связываем два документа
Для связи страниц используется элемент <a>. У него существует несколько параметров :
- href
- Этот параметр как раз и задает ссылку на другой документ. В него можно записывать относительный путь или конкретный URL.
- name
- Этот атрибут задает название для закладки, но об этом подробее чуть ниже.
<p>Первый документ
...
<a href=exam2.html>Второй документ</a>
После этого вы можете в любой момент из первого документа попасть во второй.
Для создания ссылки на другой сайт или ресурс, вы должны указать:
<a href=http://www.microsoft.com/>Visit Our Dear Friend</a>
Здесь без комментариев.
Создаем закладки
Красота закладок в том, что вы можете на каждой странице вначале создать краткое оглавление. Это очень облегчает навигацию и позволяет без прокрутки сразу перейти на нужную строку или заголовок.
Для того чтобы создать эту закладку надо вставить такую вот строчку:
<a name=mark1>
Естественно вместо mark1 можно указать любое название, но старайтесь не делать его очень длинным. Для использования этих закладок в ссылке указывается название закладки после значка #(решетки).
<a href=#mark1>Первая метка</a>
Давайте поподробнее рассмотрим их использование :
<h3>Оглавление</h3>
<a href=#head1>Заголовок 1</a><br>
<a href=#head2>Заголовок 2</a><br>
...
<hr>
<a name=head1>
<h3>Заголовок 1<h3>
....
<a name=head2>
<h3>Заголовок 2<h3>
Если ваша закладка располагается в другом файле, ипользуйте следующую ссылку.
<a href=exam2.html#mark3>Закладка во втором документе</a>
В качестве сслылок прекрасно выступают изображения. Для этого внутри <a>...</a> указывайте <img src=...>. <a href=http://www.rambler.ru/><img src="rambler.gif"></a>
В этом случае изображение будет обводится рамкой в 2 пиксела, и если вам это мешает то вспомните о атрибуте border=0 для изображений. Фреймы - это модно и легко.
Для создания фреймов создается отдельный файл, который при загрузке сделает разбиение окна, и подскажет браузеру где взять содержимое каждой ячейки.
Разбиение задается с помощью тега <frameset>, используемого вместо <body>. У него есть следующие атрибуты :
- rows
- Задает разбиение на "строки",т.е. разбивает окно на горизонтальные области.
- cols
- Задает разбиение на "колонны",т.е. разбивает окно на вертикальные области.
- frameborder
- Имеет значение yes или no. Устанавливает признак окантовки фрейма.
- border
- Задает ширину окантовки фрейма в пикселах.
- bordercolor
- Задает цвет окантовки фрейма. Цвет задается как обычно в Hex виде.
Для начала пример:
<frameset cols=100,10%,*>
....
</frameset>
Разбить окно можно на очень большое количество областей. После знака "=" указываются все размеры этих областей через запятую. Размер области может задаваться тремя способами: непосредственный размер в пикселах, размер в процентах от размера окна и произвольный. Именно так у меня указано в примере. В
данном случае окно разделится на 3 вертикальные части, первая будет 100 пикселов в ширину, вторая 10% от размера окна, а размер последней будет зависеть от размеров предыдущих, т.е. ей останется все остающееся до полного размера окна.
Теперь важно указать страницы, которые будут загружаться во все области. Для этого предназначен тег <frame>, который должен находится внутри раздела <frameset>. У него также есть свои параметры.
- name
- В этом параметре указывается имя области, по которому потом можно будет к ней обращаться. Это имя должно быть уникальным и не должно повторяться.
- crs
- Это источник этой области, т.е. имя файла или URL документа, который будет сюда загружен.
- marginwidth и marginheight
- Задают вертикальный и горизонтальный размер границы фрейма в пикселах.
- frameborder
- Устанавливает признак отображения границы фрейма. Имеет значение yes или no.
- scrolling
- Имеет значения yes, no или auto. Отвечает за использование скроллинга области, если ее сожержимое полностью не влезает. При использовании значения yes скроллинг будет присутствовать всегда, при auto скроллинг будет появляться только когда он нужен, ну а при no вы его не увидите никода.
- noresize
- Запрещает изменение размера фрейма. По умолчанию размер каждой области можно менять тасканием за границы мышкой.
- bordercolor
- Задает цвет окантовки фрейма.
Теперь примерчик покрупнее, уже работоспособный:
<html>
<frameset col=100,* border=0>
<frame name="menu" src="menu.html" noresize scrolling=no>
<frame name="mainframe" src="title.html" scrolling=auto>
</frameset>
<noframes>
<p>Sorry, your browser don't support frames mode.
<br>Change Browser and come again !!!
</noframes>
</html>
В этом примере мы разбиваем окно на 2 вертикальные части, и занружаем в них два соответствующих файла.
Раньше, когда я еще плохо знал фреймы, чтобы еще раз разбить фрейм я создавал второй файл, и загружал его. Но вскоре обнаружилось, что теги <frameset> могут быть вложенными. Таким образом разбивание стало для меня еще более простым.
Пример:
<html>
<frameset cols=100,* marginwidth=0 marginheight=0>
<frameset rows=100,* border=0>
<frame name=left_up src=leftup.html noresize scrolling=no>
<frame name=left_down src=leftdown.html scrolling=yes>
</frameset>
<frame name=right src=right.html scrolling=auto>
</frameset>
<noframes>
HE-HE-HE !!! You have COOL Browser !!!
</noframes>
</html>
В этом примере будут создаваться две колонны, и при этом левая раз1обьется еще на две части. Я постарался подобрать нормальные имена, чтобы все было ясно.
Что-же делать с ссылками ???
Фреймы несколько усложняют работу с ссылками, но не на много. В каждом фрейме может содержаться своя страница, и на каждой из них могут быть (да впрочем и есть) различные ссылки. Если вы нажмете на любую из них, то этот документ будет загружаться в этом же фрейме, но что делать если ее надо загрузить в другом (например соседнем) фрейме ??? Ведь это все создавалось, для совметного использования, а не по отдельности !!! Иначе можно было бы просто открыть много окон.А для этого мы как раз и присваивали каждому фрейму свое уникальное имя. Теперь настало время им воспользоваться !!!
Итак, чтобы загрузить страничку в определенном фрейме надо при описании ссылки воспользоваться атрибутом target, в котором как раз и указать имя требуемого фрейма.
Пример:
<a href="left.html" target="left1">А эта ссылка загрузится
во фрейме с именем left1 !!!</a>
Для того, чтобы обеспечить большую гибкость при работе с фреймами существуют несколько зарезервированных браузером имен, которые вы не можете использовать. Это имена _blank, _top, _self, _parent.
_top, _parent - эти имена используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются.
_self - это имя для загрузки страницы в этом же фрейме, но естественно его можно по умолчанию не указывать.
_blank - для загрузки страницы создается новое окно.
Фреймы очень помогают при создании хорошей навигации, т.к. не приходится много раз переписывать один и тот же код с кнопками и другими элементами. А также не придется сто раз загружать тоже самое. Для этого делаете один фрейм с ссылками (кнопками), а другие для оформления и загрузки страниц. Это намного проще.
Божественные таблицы
Таблицы
Тег таблиц называется <table>. Вся таблица должна находиться внутри него, и при этом закрывающую скобку </table> надо обязательно указывать.Параметрами этого тега задается обший вид таблицы, ее цвет, толщина рамки и многое другое. И вот какие аргументы могут быть:
- align
- Ну как и всегда этот параметр задает выравнивание таблицы. Если таблица находится в выравненных участках текста, т.е. где указаны <div> или <center> то сами понимаете выравнивание можно не указывать. По умолчанию таблица выравнивается по левому краю.
- width
- Этот параметр задает ширину таблицы. Как правило браузер подбирает размер таблицы таким образом, чтобы там все хорошенько уместилось, но вы если вам нужен конкретный размер, то вы можете его указать в пикселах или в процентах от свободного пространства.
- border
- Используется для указания ширины границы таблицы в пикселах. По умолчанию имеет размер равный 0, и при этом границы таблицы не отображаются, т.е. получается прозрачная таблица :-).
- cellspacing
- Каждую ячейку браузер обводит своей собственной рамкой, и этот параметр задает ширину пространства между ними.
- cellpadding
- Этот параметр тоже задает ширину пространства, но только уже между рамкой ячейки таблицы и ее содержанием внутри.
- bgcolor
- Задает цвет фона таблицы.
- background
- Изображение, которое будет отображатся в виде фона таблицы. Этот параметр поддерживает не много браузеров.
Далее уже начинается сама таблица. Для того чтобы создать новый ряд ячеек в таблице существует тег <tr>. Закрывающую скобку можно не указывать. Для создания новой ячейки предназначен тег <td> или <th>. Количество ячеек (т.е. элементов <td> и <th>) должно быть одинаково в каждом ряду таблицы, т.е. внутри каждого тега <tr>
Пример простейшей таблицы:
<table border=1>
<tr><td>Первая ячейка<td>Вторая ячейка
<tr><td>новый<td>ряд
</table>
В этом случае будет такая вот таблица :
| Первая ячейка | Вторая ячейка |
| новый | ряд |
Тег <tr> имеет несколько атрибутов.
- align
- Задает выравнивание внутри всех ячеек таблицы. Если, например указать align=center, то содержимое каждой ячейки будет выравнено по центру.
- valign
- Также задает выравнивание, но уже по вертикали. Может принимать значения >top - выравнивание по верху, middle - по центру, ну и bottom по низу.
- bgcolor и background
- Задают цвет или изображение фона одной строки таблицы.
Ячейки таблицы более богаты своими параметрами. Чтобы не писать снова, скажу что в них входят все параметры строк таблицы описанные выше, ну и еще парочка другая следующих :-) :
- rowspan
- Объединяет указанное количество ячеек в одну по вертикали.
- colspan
- Объединяет ячейки по горизонтали.
- width и height
- Задают рекомендуемые размеры ячейки по горизонтали и вертикали.
<td></td>
То она не отображается браузером (по крайней мере у меня в IE 4.0), т.е. не появляется рамка ячейки. Для этого по идее надо пользоваться <td nospan></td>
Но и тут прикол, IE и ее не отображает. А вот Opera 3.51 отображает все эти дела в любом сочетании :-), я вот только еще в Netscape Navigator'е не проверил, потому что лень второй винт подключать с Линуксом. Ну короче не знаю, что об этом сказать, по видимому специально для IE вам придется пользоваться закодированным пробелом , потому что что-то типа <td>[пробел]</td> не сработает из-за того что все
пробелы игнорируются браузерами.
Наверно многие не поняли как это могут ячейки объединяться. А вот как !!! Пример:
<table border=2>
<tr><td>1<td>2<td>3<td>4<td>5
<tr><td colspan=2 rowspan=2>6<td colspan=2>7<td rowspan=2>8
<tr><td>9<td>10
<tr><td>11<td>12<td>13<td>14<td>15
</table>
А вот как это все выглядит :
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | ||
| 9 | 10 | |||
| 11 | 12 | 13 | 14 | 15 |
Как видите в первой строке 5 элементов <td>. Вот во второй строке уже те самые чудеса творятся !!! Элементов <td> теперь уже всего 3, НО заметьте что если просуммировать все значения colspan, то снова получится 5. Ксати по умолчанию для каждой ячейки параметр colspan равен 1.
Третья строчка еще веселее, потому что над ней можно час думать и голову сломать, но всеже тут все просто. Вы должны взять и посмотреть сколько ячеек у вас "выростает" вниз и посмотреть их ширину. А нашем примере у нас есть 2 ячейки параметр rowspan в которых не равен 1, причем первая расширяется на 2 ячейки. Итого значит в этой строчке остаются незаполненными всего 5-3=2 ячейки. Что и соответствует дейстительности :-).
Вобщем понять это не просто, но Вы научитесь. Кстати очень замечательная особенность Html, в том что в ячейке можно сделать вложенную таблицу, а в ней еще одну и т.д. пока таблицы не кончатся :-).
Еще хотелось сказать немного о элементе <th>. Он, как уже говорилось ранее, также задает ячейку, но только отличается тем что текст внутри такой ячейки отображается жирным шрифтом. И ИМХО этот элемент просто эквивалентен <td><b>...</b>, только короче и проще.
Ну вобщем про таблицы все. Только осталось добавить, что на самом деле разные браузеры имеют дополнительные параметры для красоты таблиц, но так как мы условились писать наши документы для всех браузеров и всех платформ , я не написал о них, а потом они не входят в спецификацию языка.
Если они вас очень интересуют, то изучайте коды своих браузеров :-). Ну или на худой конец запустите FrontPage и узнайте, что же все-таки дорогой Билли заложил в свой IE !!! Только смотрите не найдите тайные ходы в нем, а то он обидится :-))) !!!
Операция без наркоза.
Для примера я, на скорую руку, создал вот эту картинку :
Как видите на ней достаточно много кнопок, естественно на которые нам бы хотелось нажимать, а не смотреть !!! :-). Нашлось два решения этой достаточно сложной проблемы.
Решение первое
Первое решение не особо сложное, хотя имеет ряд технических сложностей. Заключается оно в использовании "карты" на изображении (от англ. map-карта). Я уже упоминал их при описании работы с изображениями, но не стал останавливаться подробно, чтобы это сделать сейчас :-).Для того, чтобы создать "карту" в языке html существует тег <map>. Он задает разбиение изображения на "горячие" области, т.е. области при нажатии на которые можно загрузить другой файл html.
Параметр у этого тега только один - это name, который должен быть обязательно. Пример:
<map name="example">
.....
</map>
Закрывающая скобка также должна обязательно присутствовать. Внутри <map>...</map> могут, а вернее должны, следовать элементы описывающие "горячие" области.
Эти области задает элемент <area>. Он не должен содержать закрывающей скобки. У него существуют следующие параметры :
- href
- Задает адрес страницы, которая будет загружаться этой областью.
- shape
- Задает форму "горячей" области. Может принимать значения circle - окружность, rect - прямоугольник, poly - полигон любой формы.
- coords
- Задает координаты области. Все координаты отсчитываются от левого верхнего угла изображения. Они могут задаваться либо в пикселах, либо в процентах от размеров изображения, т.е. X от ширины, а Y от вышины. Естественно, так как существуют разные формы областей, способы их задания также различны.
Для окружности : coords="Х центра, Y центра, радиус"
Для прямоугольника : coords="лево верх Х, лево верх Y, право низ X, право низ Y"
Для полигонов : coords="Х точки 1, Y точки 1, X точки 2, Y точки 2, ......"
- nohref
- Предназначен для запрета области, т.е. той на которую нельза нажимать. Помогает "выкалывать" области.
- alt
- Этот атрибут как и у изображений, сообщает текст браузеру, который будет выводиться при наведении мыши на "горячую" область.
Следование областей может быть произвольным, но если какие-то части областей пересекаются, то на область пересечения будет реагировать та область, которая идет в списке первой. Это как раз касается областей с атрибутом nohref, т.е. чтобы выколоть в области дырку, надо сначало прописать область с nohref, а затем нормальную.
Пример тега <area>:
<area shape=rect coords=5,5,15,15 nohref>
<area href=main.html shape=rect coords=0,0,20,20 alt="Main
Page">
Для того, чтобы назначить изображению карту надо использовать атрибут usemap и в нем указать значение name в теге <map>. Пример:
<img src=example.gif usemap="#example">
При указании имени важно учитывать регистр.
Давайте теперь вернемся к нашему "разбиваемому изображению". Чтобы применить способ карт, создадим вот такой код :
<map name="prob">
<area href=koi.html shape="circle" coords="60,18,12">
<area href=win.html shape="poly"
coords="62,37,68,30,86,30,92,37,87,46,69,46">
<area href=iso.html shape="circle" coords="78,63,12">
<area href=main.html shape="rect" coords="19,73,60,92">
</map>
<p><img src=step13.gif usemap="#prob" alt="Menu">
И получим вот такую штуку !!! Можете там потыкаться !!! Я пометил горячие области красным, но естественно их не будет в нормальном состоянии. Просто это чтобы Вы ощутили ......
Интересно ??? Ну вот и хорошо !!!
Решение второе
Это решение уже более сложное, но "совершенное" и "мобильное", а почему потом объясню.Так как мы с Вами договорились резать картинки без наркоза, давайте так и сделаем. Иногда решить как разрезать бывает сложно, и скорее всего надо создавать изображение уже с расчетом на то, чтобы дальнейшее ее разрезание прошло гладно и без лишней потери крови :-). Вот как я бы разрезал эту картинку с кнопками.
Надо отметить, что лучше резать картинку так, чтобы в дальнейшем ее можно было спокойно вставить в таблицу. Для этого все разрезанные картинки должны быть прямоугольные, и не иметь ни каких выступов и вмятин. Если вы режите, то режьте во всю длинну изображения, или до той части, которая окажется в другой ячейке таблицы.
Эту картинку я разрезал так, чтобы области 1, 2 и 3 оказались в одной ячейке, для этого надо было строго соблюдать их высоту. Затем на подходе область 4. Что же с ней делать ? Она у нас почти размером в две кнопки, и поэтому лучше будет, если мы оформим ее в отдельной от двух кнопок ячейке. Для этого чтобы соблюсти размер ячеек таблицы пришлось эти две кноки (5 и 6) тоже ограничить. Теперь осталась одна кнопка 7 в принципе ее можно было бы сделать во все длинну, т.к. ей никто уже не мешает, но у нас уже таблица в 2 ячейки шириной, поэтому можно свободно отрезать правый кусок (8) от нее, но только естественно шириной с те кнопки, которые мы отрезали раньше.
Ну все получили много кусков, и начинаем их собирать.
<table border=0 cellspacing=0 cellpadding=0>
<tr><td colspan=2><img src="1.gif"><a href=""><img src="2.gif"
alt=Koi border=0></a><img src="3.gif"></td>
<tr><td><img src="4.gif"><td><a href=""><img src="5.gif" alt=Win
border=0></a><br><a href=""><img src="6.gif" alt=Iso border=0>
</a></td>
<tr><td><a href=""><img src="7.gif" alt=Main border=0></a></td>
<td><img src="8.gif"></td></tr>
</table>
Сначало нам надо установить размер рамки таблицы и пространств между ячейками равными нулю. Ну ,а затем прописать все картинки как надо. Я думаю на этот раз обойдемся без особых объяснений. Вот что мы получили...
 |
|
| 
 |
 |
 |
Конечно "горячие" области сейчас уже не по размеру кнопки, но ....... Обсудим в следующем абзаце :-).
Что же выбрать ???
Выбор в принципе за вами. Оба эти метода достаточно сложно реализовать вручную, и там и тут вам придется работать с координатами и линиями. По мне дак первый способ легче, но второй лучше. Давайте поясню почему. Вы например отображаете картинки при просмотре страниц ??? Я уверен что 50% скажет, что нет. И поэтому вот вам пример, что вы увидите в двух случаях....
Ну дак вы ощутили различие ??? Правильно... В первом случае не известно куда давить..... И скорее всего можно промахнуться. А второй вам нравится ???
В пользу второго метода также говорит то, что разрезанные картинки гораздо быстрее загружаются, хотя их общий размер может быть и больше, но это уже трудности "хирургов". Посетитель только зайдя на страницу, и не загрузив полное изображение, сможет по видимым кускам определить, надо ли догружать остальное или нет. Кстати очень часто, да почти всегда, нормальные вебмастера разрезают слишком большие изображения на мелкие. И более того это правило находится далеко не на последнем месте из 10 заповедей сайт-дизайнеров. Так что думайте и решайте. Помоему приятнее грузить больщую картинку по кусочкам и видеть, что там появляется, чем ждать полчаса, а потом разочароваться и послать к какой-то матери обидчика...
Да че я ваще тут Вам это все объясняю, Вы и сами прекрасно знаете......
Недопустимые символы.
Вы поняли, почему я задал этот вопрос ? Если нет, то объясню. Как же вы собираетесь их отображать, если браузер их воспринимает за начало и конец тега ? Вот видите.
Для этих всех дел предусмотрены так называемые ESC-последовательности. Символы, которые запрещены в прямом виде зашифровываются в следующем виде:
&#<номер символа в таблице ACSII>;
Таким образом, чтобы закодировать символ '<' требуется записать :
< - это символ '<'
Если вы сможете запомнить все номера символов, то я Вам кланяюсь... (ой хрустит.. :-) А для тех, кто не может это сделать, предусмотрены определенные названия для таких символов. Символ Кодировка
| Символ | Кодировка |
|---|---|
| & | & |
| < | < ( less than ) |
| > | > ( greater than ) |
| " (двойные кавычки) | " |
Список этих последовательностей является, можно сказать, обязательным для всех браузеров. И поэтому их можно свободно использовать во всех текстах.
Вот табличка с ASCII кодами символов, которые Вы можете использовать:
| * | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | ! | " | # | $ | % | & | ' | ( | ) | * | + | , | - | . | / | |
| 3 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | : | ; | < | = | > | ? |
| 4 | @ | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O |
| 5 | P | Q | R | S | T | U | V | W | X | Y | Z | [ | \ | ] | ^ | _ |
| 6 | ` | a | b | c | d | e | f | g | h | i | j | k | l | m | n | o |
| 7 | p | q | r | s | t | u | v | w | x | y | z | { | | | } | ~ | |
| 8 | ? | | ‚ | ƒ | „ | … | † | ‡ | ˆ | ‰ | Š | ‹ | Œ | | Ž | |
| 9 | | ‘ | ’ | “ | ” | • | – | — | ˜ | ™ | š | › | œ | | ž | Ÿ |
| 10 | ¡ | ¢ | £ | ¤ | ¥ | ¦ | § | ¨ | © | ª | « | ¬ | | ® | ¯ | |
| 11 | ° | ± | ² | ³ | ´ | µ | ¶ | · | ¸ | ¹ | º | » | ¼ | ½ | ¾ | ¿ |
| 12 | À | Á | Â | Ã | Ä | Å | Æ | Ç | È | É | Ê | Ë | Ì | Í | Î | Ï |
| 13 | Ð | Ñ | Ò | Ó | Ô | Õ | Ö | × | Ø | Ù | Ú | Û | Ü | Ý | Þ | ß |
| 14 | à | á | â | ã | ä | å | æ | ç | è | é | ê | ë | ì | í | î | ï |
| 15 | ð | ñ | ò | ó | ô | õ | ö | ÷ | ø | ù | ú | û | ü | ý | þ | ÿ |
Естественно, тут тоже существуют имена для различных символов, но я не очень уверен, что достаточное количество браузеров поддерживает их.
Вот символы :
Æ ,Á , ,À , Å ,à ,Ä ,Ç ,Ð ,É ,Ê ,È , Ë ,Í ,Î ,Ì ,Ï ,Ñ ,Ó ,Ô , Ò ,Ø ,Õ ,Ö ,Þ ,Ú ,Û , Ù ,Ü ,Ý ,æ ,á ,â ,à ,å , ã ,ä ,ç ,ð ,é ,ê ,è ,ë , í ,î ,ì ,ï ,ñ ,ó ,ô , ò ,ø ,õ ,ö ,þ ,ß ,ú ,û , ù ,ü ,ý ,ÿ
А вот и коды :
Æ ,Á , ,À , Å ,à ,Ä ,Ç ,Ð ,É ,Ê ,È , Ë ,Í ,Î ,Ì ,Ï ,Ñ ,Ó ,Ô , Ò ,Ø ,Õ ,Ö ,Þ ,Ú ,Û , Ù ,Ü ,Ý ,æ ,á ,â ,à ,å , ã ,ä ,ç ,ð ,é ,ê ,è ,ë , í ,î ,ì ,ï ,ñ ,ó ,ô , ò ,ø ,õ ,ö ,þ ,ß ,ú ,û , ù ,ü ,ý ,ÿ
Есть один браузер, называется Opera. Когда я подставил ему эти коды, он отобразил совершенно не то, что вы видите, если у вас Эксплорер. Он отобразил просто обычные русские символы, которые по замыслу и находятся во второй половине таблицы. Незнаю почему... Наверно от шрифта зависит...
Кстати существуют, хотя я уверен их осталось единицы, сервера, которые поддерживают только 7 битную кодировку. Поэтому, чтобы разместить страничку в русской кодировке придется все шифровать такими вот ESC-последовательностями. Размер файлов при этом будет просто сокрушающим... Кстати такой метод кодирования применяется в почте, и поэтому письма в формате html занимают на порядок больше места, чем обычный текст. Я лично не понимаю с чем это связано. Неужели, если они могут передавать 8 битные тексты, они не могут передавать 8-битные html. Для меня это просто загадка... Может им трафика не жалко ???
Последний штрих
Я думаю, что этот маленький абзац будет тем последним штрихом до полной "картины" html. А не сказал я о комментариях в этом языке. Естественно комментарии не несут в себе полезной информации и служат только для помощи веб мастеру лучше ориентироваться в своих файлах. Не стоит ими особо злоупотреблять. А оформляются они в виде:
<!-- Это небольшой комментарий -->
Они могут оказаться полезными при разметке очень большого количества вложенных таблиц, списков или еще чего. Но хочу вам сказать, что аккуратно написанный текст можно будет спокойно понять и без комментариев. Как писали в одной книге про программирование: "Настоящему программисту комментарии не нужны, так как у него есть текст программы." Я думаю с этим согласятся многие.
Хотелось бы также сказать и о самом оформлении "исходников" документов. Не используйте большие отступы при оформлении. Я конечно понимаю, что они улучшают понимание, но браузер, как я уже говорил, их игнорирует и не отображает. Так зачем же тогда их загружать ? Для отступов используйте лучше tab. Потом еще делайте отступы в несколько строк, отделяя наиболее крупные участки документа. Может тогда вам и комментарии не понадобятся.
Вообще лучшее состояние документа, когда в нем нет ни одного лишнего пробела и весь текст идет сплошной строкой (я говорю об исходнике :-). У этого есть и недостатки и плюсы. К недостаткам можно отнести неудобство редактирования в таком состоянии. Что само по себе естественно :-). Но плюсов больше. Во-первых скорость загрузки будет больше, во-вторых "плагиатчик", каких сейчас добрая половина не сможет быстро найти нужный ему элемент и ему придется повозиться. Хотя это жестоко... Как тут писали, копирование есть самое лучшее одобрение. Если вас копируют, вам подражают, значит вас любят и уважают. Во как !!!
Я уже не знаю, о чем я тут еще не рассказал, но если уж чето пропустил или забыл, значит скорее всего это не важно или редко используется.
Что такое SSI ?
Так что же это такое ?
Для начала расшифровка SSI. Это S erver-Side Includes, что значит вставка на стороне сервера. Звучит не очень понятно :-). Ну если просто, то это возможность того, что сервер будет включать в ваши документы какие то данные во время предачи, т.е. "на лету".
Как настроить ?
Настроить достаточно просто. Кроме того, если Вы настроили свой Apache, как было рассказано в первых шагах, то у Вас уже все настроено. Но если нет, то зайдите в редактор и откройте файл httpd.conf. Найдите и разкомментируйте эти строчки :
AddType text/html .shtml
AddHandler server-parsed .shtml
Если Вы их не нашли, то вставьте в конце.
Если Вы не администратор сервера и возможности подправить настройки сервера у Вас нет ,но вы твердо уверены, что на сервере установлен Apache, то в каталоге, где будут лежать файлы SSI, создайте файл с именем .htaccess. В него запишите те две строчки и добавьте:
Options +Includes
Теперь, по идее, все должно работать как часы :-).
Начнем "инклюдить"
Все это мы сделали, чтобы появилась возможность использовать SSI, но вопрос : Как ее использовать ?
Для того чтобы в файл что-то включить используется "команда" вида:
<!--#команда атрибут1="значение" атрибут2="значение" ... -->
Причем признак конца (-->) должен следовать после пробела, чтобы отделить его от основной команды.
На самом деле эти "команды" простые комментарий в файле .html. Но переименовав его в .shtmlмы заставляем сервер искать комментарии такого типа и использовать их в качестве команд.
Команды SSI бывают нескольких типов:
- Конфигурационные
- Выводящие переменные или данные
- Загружающие скрипты
- Включающие содержимое файлов
К конфигурационным относятся configи set.
Для команды config существуют следующие атрибуты :
- errmsg
- Задает выводимое сообщение, если во время обработки какой-либо команды была совершена ошибка.
- sizefmt
- Задает формат вывода размера файла. При значении bytesразмер будет выводиться в байтах, а при abbrev размер будет округляться и выводиться с добавкой Kb или Mb
- timefmt
- Задает формат вывода дат. При задании формата используется символ
%(процент) и после него буква означающая тип выводимого значения (название месяца, день недели и .т.д) Вот что означают буквы :
- %a - название дня недели в сокращенной форме
- %A - название дня недели в полной форме
- %b - сокращенное название месяца
- %B - полное название месяца
- %d - номер дня месяца в десятичной форме (01 до 31)
- %H - час в 24 часовой форме (00 до 23)
- %I - час в 12 часовой форме (01 до 12)
- %j - номер дня года в десятичной форме (001 до 336)
- %m - номер месяца в десятичной форме (01 до 12)
- %M - минуты
- %p - выводить добавку 'am' или 'pm'
- %S - секунды
- %U - номер недели текущего года (первая неделя начинается с первого воскресенья года)
- %W - номер недли года (первая неделя начинается с первого понедельника)
- %w - день недели в десятичной форме, воскресенье принимается за 0
- %x - дата в предпочтительной форме
- %X - время в предпочтительной форме
- %y - номер года без века (00 до 99)
- %Y - номер года с веком
- %Z - временная зона (имя или аббревиатура)
- %% - символ % (процент)
Пример:
<!--#config sizefmt="bytes" timefmt="%A %y %X" -->
<p>File size : <!--#fsize file="index.html" -->
<p>Last modyfied : <!--#flastmod file="index.html" -->
В этом случае выведутся данные в таком формате:
File size : 1,958
Last modyfied : Thursday 99 19:25:16
Команда set задает значения переменных. Атрибуты :
- var
- имя устанавливаемой переменной
- value
- значение этой переменной
Дальше идут команды, которые выводят данные или значения переменных. К ним относятся echo, fsize, flastmod и printenv.
Команда echo выводит содержимое переменной, название которой задается параметром var. Пример :
<!--#set var="enc" value="RUS" -->
<!--#echo var="enc" -->
Команда fsize выводит размер файла указываемого параметром file. Этот параметр задает положение файла относительно текущей директории. Другой параметр virtual задает URL-путь (%-кодированный) до файла относительно текущей директории. Размер файла выводится в формате заданным параметром sizefmtкоманды config.
<!--#config sizefmt="bytes" -->
<!--#fsize file="index.html" -->
Команда flastmod выводит дату последней модификации файла заданного параметрами file или virtual, как в команде fsize. Формат вывода времени задается параметром timefmt команды config.
Комагда printenv выводит значения всех переменных окружения и переменных заданных с помощью set.
Про остальные команды SSI в следующем шаге.
Продолжаем мучение(изучение) SSI.
Команда include
Эта команда позволяет вставлять в документ содержимое других текстовых (и не очень :-) файлов.Для указания файла используются параметры file и virtual. Они аналогичны параметрам команды fsize и flastmod, поэтому не буду на них останавливаться.
Именно эта команда может вам помочь при решении той проблемы с почтовым адресом на вашем сайте. Кстати рекомендую вам пользоваться ей, если ваш сайт без фреймов, т.е. просто в виде таблицы. Тогда вам не придется сотни раз копировать содержимое столбика с кнопками, и естественно позволит безболезненно добавлять новые кнопки.
Пример:
<--#include file="toptable.inc" -->
Команда exec
Ну это естественно самая прекрасная команда, которую можно было ждать от SSI. Благодяря ей страницы действительно становятся "живыми".
Эта команда запускает программу или скрипт CGI, и вставляет результат выполнения этой команды.
Параметр cgi содержит путь до программы, которую требуется выполнить. Она будет действовать только если в настройках вашего сервера установлен параметр ScriptAlias и в файле .htaccess указана настройка Options ExecCGI.
Альтернативой параметру exec является cmd. Он выполняет указанную команду посредством /bin/sh (но это для юникса, а для виндов наверно через command.com :-).
<--#exec cgi="param.cgi" -->
<--#exec cmd="kill -TERM 123" -->
Обработка условий
В SSI существует возможность обрабатывать условия, и в зависимости от них вставлять различные участки текста. Структура и огранизация этих условий очень похожа на директивы компилятора в языке C++.
Структура очень простая:
<--#if expr="условие_1" -->
<--#elif expr="условие_2" -->
<--#else -->
<--#endif -->
Принцип работы такой: если условие_1 истинно, то вставляется текст следующий за этой командой до появления команд elif, else или endif. Команды elif и else выполняются, если первое условие оказалось ложным.
Команда endif должна обязательно заканчивать условный блок if.
В качестве условий могут выступать сравнения строк:
строка
условие принимает значение "истина", если строка не пустая
строка1 = строка2
строка1 != строка2
строка1 < строка2
строка1 <= строка2
строка1 > строка2
строка1 >= строка2
Здесь сравниваются две строки. Условие принимает результат сравнения. Например:
A < Z
условие примет значение "истина".
В качестве условия можно использовать несколько условий связанных логическими операциями.
!_условие_
!- отрицание условия. Принимает значение "истина", если _условие_ ложно.
условие_1 && условие_2
Принимает значение "истина", если оба условия истинны одновременно.
условие_1 || условие_2
Принимает значение "истина", если какое-нибудь из условий истинно.
условие_1 != условие_2
условие_1 = условие_2
Операции "="(равно) и "!="(не равно) сравнивают два условия на эквивалентность.
Приоритет операций такой:
! - наивысший приоритет
=,!=
&&,|| - низкий
Первыми выполняются операции имеющие высший приоритет.
Ну и пример использования:
<--#config timefmt="%Y %j" -->
<--#if expr="\"$DATE_LOCAL\" = \"2000 01\"" -->
<p>С новым 2000 годом !!! УРА !!!
<--#else -->
<p>До нового года еще далеко...
<--#endif -->
Хотелось поговорить о задании условий. Для того, чтобы подставить в условие значение переменной установленное командой set, необходимо перед именем переменной поставить знак доллара " $".
$REMOTE_HOST
В этом случае подставится значение переменной REMOTE_HOST.
Для правильного сравнения сложных строк (содержащих пробелы) их необходимо заключить в двойные кавычки ("), но так как само условие тоже находится в кавычках, то надо перед кавычками внутри условия ставить обратный слэш (\).
<!--#if expr="\"$name\"=\"Вася Пупкин\"" -->
В результате таких преобразований будут сравниваться строки (name="Илья Муромец")
"Илья Муромец"="Вася Пупкин"
А не
Муромец=Вася
Это очень важно !!! Неправильное условие может привести к ошибке сравнения и команда не будет обработана...
Технология SSI позволит вам создавать меняющиеся странички. Используйте ее для оформления в отдельные файлы общих кусков страниц сайта. Это позволит вам не задумываться об их содержании, а сконцентрированть свое внимание на основной части.
Пример:
<!--#include file="top.inc" -->
Это основное содержание страницы.
<!--#include file="bottom.inc" -->
Содержание top.inc
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
<meta name="description" content="МОЯ классная страничка !!!">
</head>
<body text=black bgcolor=white link=blue vlink=blue alink=red>
Файл bottom.inc
</body>
</html>
Все с SSI мы полностью разобрались...