Предисловие
Сейчас появляется все больше и больше статей о том, как важно относиться к качеству предоставляемой вами информации, как сделать баннер с большим CTR, но почему-то нет нигде советов о том, как добиться повышенной "административности" вашего сайта без наворотов программирования. А если и где есть похожая информация, то она настолько размыта бесполезными комментариями и ненужными уточнениями, что очень трудно понять суть правильного написания сайта.

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

Редакторы HTML
"Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка текста" и т.д., в общем, работать крайне неудобно. Поэтому сразу отметем их в сторону." CopyRight © 2000, Николай Курдяев

Прочитали четкое определение "текстовых редакторов"? А ведь человек является одним из составителей web-школы (УРОК.ru)...

Для тех, кто не понимает, почему такое мнение абсолютно неправильно, или больше склоняется к мнению Николая Курдяева, можно только посочувствовать... Дело в том, что некоторые "специалисты" не знают, что при нормальной (то есть качественной) структуре HTML-кода, "подсветка" только мешает, а "поддерживать проекты" лучше (то есть качественнее, экономичнее и грамотнее) с помощью CSS и Java Script, а, может быть, если у Вас есть возможность, и с помощью SSI. Обо всех этих возможностях чуть-чуть позже. Сейчас рассмотрим тему "редакторы HTML".

Вы наверняка уже знаете такие программы, как FrontPage, HomeSite, Netscape Navigator Gold. Все они относятся к редакторам типа "что видишь, то и получишь". Это значит, что вы можете делать web-страницы, также как писать документы в Word. Всю программую и административную часть эти редакторы берут на себя. Но они все имеют одни и те же недостатки (которые "некоторым" не важны):

1. Делают страницу, как правило, под один броузер (Internet Explorer). В другом же сделанное выглядет "абсолютно не так, как надо".
2. Делают страницу, ориентируясь на одно разрешение экрана, то есть на Ваше.
3. Объем страницы получается, как правило, запредельным, то есть намного больше, чем могло быть.
4. В процессе создания страницы невозможно перенести какой-либо объект в другое место без ошибок и ущерба для дизайна.

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

Конечно, "не надо верить, пока сам не попробывал". Можете сравнить компактность обычного блокнота (Notepad) и неповоротливоть FrontPage. Но, скорее всего, вы придете к мнению, что надо все-таки делать сайт правильный...

 

Структура HTML-кода
Если вы в первую очередь обеспокоены отсутствием "подсветки" в блокноте, то тут на самом деле нет пробемы - работайте в тестовом редакторе FAR 1.63 (и выше). Там есть "подсветка" и HTML и Perl и всего-всего. Но на самом деле, как было сказано выше, - "при нормальной структуре HTML-кода, "подсветка" только мешает".

Как же нужно писать на HTML, чтобы удобно было ориентироваться в коде? Если Вам лень читать текст об этом, можете просто открыть HTML-код этого файла и увидеть, как легко находить любое нужное место без "подсветки". Если все же у Вас есть легкое недоумевание - "и это есть идеал структуры кода", то значит Вы либо слишком много работали в навороченных редакторах, типа FrontPage, либо совсем недавно принялись изучать эту область. Поверьте - через небольшой отрезок времени, вы легко будете находить все, что Вам нужно в любом коде. Научиться нужно только один раз, а использовать можно многократно!

Итак, самое главное в "правильном написании" кода - размещение более "важных" тегов левее к краю блокнота: т.е. тэг <Table> должен быть левее, чем тот же <Td>. Вот пример правильного расположения тэгов таблицы и информации в ней:

    <Table Width="80%" Border="1" Cellspacing="0" Cellpadding="4">
      <Tr>
        <Td Align="Left" Valign="Top">
          Информация в ячейки #1
        </Td>
        <Td BgColor="#ffffdd" Align="Right">
          Информация в ячейки #2
        </Td>
      </Tr>
    </Table>

Обратите внимание, что все тэги и их параметры начинаются с заглавной буквы, а заканчиваются маленькими. Хотя существует множество других "обозначений" тэгов, например: <TABLE> </TABLE>, <TABLE> </table>, <table> </table>, <table> </TABLE> и т.д. Не важно, какой вариант Вы предпочтете для работы, главное всегда придерживаться одинакового написания.

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

<Font Face="Verdana" Size="2" Color="#003366"><B><I>Нужный Вам текст</I></B></Font>

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

Такое же правило действует и на параметры, внутри отдельного тэга. Например, если Вы пишите в тэге <Img> параметр "Border" раньше, чем главный "Src", то это чревато неблагоприятными последствиями. Для рисунка правильней всего было бы вот такое расположение параметров:

<Img Src="picture.gif" Width="40" Height="25" Border="0" Alt="краткое описание">

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

Главное, чтобы Ваша структура, Ваше расположение тэгов и параметров оставались одними и теми же во всех Ваших html-страницах.

Использование CSS
Каждый кто начинал делать сайт неизбежно натыкался на проблему "бесконечного повторения многих настроек текста и других объектов". Рассмотрим пример, данный в предудыщем разделе:

<Font Face="Verdana" Size="2" Color="#003366"><B><I>Нужный Вам текст</I></B></Font>

Когда так надо написать один-два раза, тогда еще терпимо, но когда такой стиль повторяется раз 40-50 в каждой из 25 страниц?.. Так вот, для вынесения параметров того или иного объекта в отдельный параграф и файл, можно использовать CSS (Cascading Style Sheets - Таблицы Каскадных Стилей). Между тэгами <Head> и </Head> впишите следующее:

 

<Style>

  Body   {font-family: times new roman,tahoma,verdana; font-size: 12px;}

  Td   {font-family: verdana,tahoma; font-size: 11px; color: #330000;}

</Style>

 

После этого в этом документе по умолчанию будут следующие параметры:

1. Для текста в <Body>
   1. шрифт Times New Roman, если нет - Tahoma, если нет, то Verdana
   2. размер шрифта 12px (пикселов) - независимо от настроек броузера (маленький/средний/крупный).
2. Для текста внутри <Td>, то есть в таблицах
   1. шрифт Verdana, если нет - Tahoma
   2. размер шрифта 11px - независимо от настроек броузера (маленький/средний/крупный).
   3. цвет #330000 (темно-красный)

 

Довольно показательный пример. На самом деле, Вы можете использовать любые тэги вместо <Body> и <Td>, в которых может быть параметры текста. Синтаксис этого "приложения" к HTML довольно простой:

 

<Style>

  имя_тэга   {параметр: значение_параметра; параметр: значение_параметра;}

</Style>

 

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

 

  .punkt   {font-family: verdana,tahoma; color: #330000;}

 

Далее, если Вы захотите использовать такие параметры для текста, то в тэге <Font> впишите только один параметр:

 

<Font Class="punkt"> Текст, который использует CSS </Font>

 

Конечно, это очень кратко о CSS, неучтены многие тонкости, но надо сказать, что данное "приложение" работает в любом броузере.

Для полноты этой статьи о CSS, перечислим наиболее часто используемые параметры языка:

font-family: verdana,tahoma; - используемый шрифт
font-style: italic; - курсив текста
font-weight: bold; - выделение (жирность) текста
font-size: 12px; - размер текста в пикселах
text-decoration: none/underline/overline/line-through; - подчеркнутый/надчеркнутый/перечеркнутый текст
block-level: left/right/center/justify; - положение текста для тэгов и <Div>
color: #550000; - цвет любого элемента
background-color:#ffffdd; - цвет фона элемента
background-image:URL(piture.gif); - фоновое изображение
margin-left/margin-right/margin-top/margin-bottom: 3%; - отступ слева/справа/сверху/снизу
width: 75%; - ширина элемента
height:100pt; - высота элемента

Допустимы следующие единицы измерения:

px - pixels, пикселы
in - inches, дюймы
pt - points, точка (1pt = 1/72 in)
cm - centimeters, сантиметры
mm - millimeters, миллиметры

Есть и еще одно серьезное преимущество CSS - все эти настойки можно выносить в отдельный файл, и вместо старой вставки, надо между <Head> и </Head> прописать следующую строчку:

<Link Rel="StyleSheet" Type="text/css" Href="style.css">

Конечно путь, как и сам файл, может быть другим. А все настройки перенести в style.css...

Java Script вместо SSI
"SSI (Server Side Include) - дериктива Web-сервера, позволяющая серверу подставлять какие-либо данные на место вызова. Подставляемые данные могут быть как статическими, так и динамически генерируемыми. Статические данные - уже готовые, записанные в виде файлов, текст или фрагменты HTML. Такие данные удобно использовать если на большом количестве страниц повторяется один и тот-же фрагмент: "шапка", меню сайта и т.д. Динамически генерируемые данные - это результат работы какого-либо CGI-скрипта или комманд операционной системы, на которой работает Web-сервер." CopyRight © 2000, Alexey Khristenko (http://www.magnit.net/)

Это вполне понятное и официальное определение SSI. Конечно, надо сказать сразу, что Java Script может заменить только "статические данные", что в полне понятно, если знать основы интернет-программирования. Итак, как Вы уже поняли, есть возможность вынести в отдельный файл, например, меню сайта. Всегда есть способ это сделать с помощью SSI, вставив на место меню следующую строчку:

<!--#include virtual="menu.htm"-->

но этот файл должен обрабатываться SSI (обычно расширение файла должно быть *.shtml)

Однако на многих серверах, предоставляющих бесплатный домен и хостинг, нет возможности использовать ни SSI, ни Perl, ни PHP и т.д. Да и посмотреть у себя на компьютере страницу полностью, не будет возможности без установки локального сервера (имитации интернета) - Apache... Есть почти такая же возможность вынести в отдельный файл постоянные элементы Вашего сайта - "шапку", меню, рекламу и т.д. Это делается с использованием Java Script. Кто-то скажет, что у некоторых пользователей отключено выполнения скриптов, и окажется прав, но от части. Потому что, кто и отключает эту функцию, это не тот, кто Вам нужен, он не будет Вашим постоянный пользователем. В общем, на это не стоит обращать внимание.

Итак, Вам, наверное, известно о Java Script хотя бы в общих чертах. Так вот, среди других функций в этом языке программирования есть знакомая всем document.write(), которая выводит на экран результат какого-то действия. Но внутрь круглых скобок можно внести и фрагмент HTML (в кавычках).

 

<Script>

    document.write("<H2> Это результат функции document.write </H2>");

</Script>

 

Иначе говоря, можно html-документ полностью написать в Java Script. К чему все это, спросите Вы. Так вот, этот скрипт можно вынести в отдельный файл, указав на его месте только ссылку на файл:

 

<Script Src="menu.js"></Script>

Осталось лишь создать файл menu.js, в котором будет меню примерно в таком виде:

 

document.write("<Center>");

document.write("  <A Href=link1> Ссылка на первый раздел</A>");

document.write("  <A Href=link2> Ссылка на второй раздел</A>");

document.write("  <Hr Width=65%>");

document.write("  <A Href=link3> Ссылка на третий раздел</A>");

document.write("</Center>");

 

Важно отметить следующее: писать можно любые тэги любой сложности, но при этом кавычки ставить нельзя, так как они уже использованы в самом Java Script. И еще уточнение - каждая строчка должна начинаться с document.write(" и заканчиваться ");. Не забывайте ставить точку с запятой в конце каждой такой строчки. Если вы используете на странице CSS, то информация вынесенная в отдельный файл (при помощи Java Script) тоже будет обрабатываться "каскадной таблицей стилей" (CSS).

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

1. общепринятое правило не всегда верно
2. ваши личные пристрастьи к написанию html должны быть "согласованы" с Kb страницы.
3. оптимизация под Internet Explorer не должна считаться узконаправленной, так как только в этом броузере есть все необходимые тэги для текстового дизайна и 80% всех пользователей российского интернета пользуются именно этим броузером (данные системы SpyLog).

Статьи