Многим людям создание сайта кажется нереальной задачей. Это что-то такое далекое и непонятное. Считается даже, что для создания сайта необходимо какое-то специальное образование!

Но это не так, создать сайт может любой человек. Нужно только узнать, как. Давайте представим такую ситуацию. Ваш друг или вы сами очень хотите создать свой сайт, но никакими специальными знаниями по этому вопросу не владеете, то есть кто вы? Правильно, чайники 🙂 У вас есть еще один друг, который «разбирается в компах» и утверждает, что «сбацать сайт — это раз плюнуть» (не знаю как у вас, но у меня полно таких знакомых). Смотри, — говорит он, — это HTML. С помощью него сайты и делают. Что, не понятно? На, читай книжку» — и дает вам толстенный учебник. В нем полно разных непонятных значков, написанных убористым шрифтом. Понятно, у чайника глаза на лоб полезут, когда он узнает, «как делают сайты». И, скорее всего, от идеи создания сайта он быстро откажется. И поделом, скажут «доброжелатели». Но мы не будем их слушать. Так как не приемлем дискриминацию по любому признаку 🙂

Вообще, я это говорю не просто так, все проверено на личном опыте. Как моем, так и других людей, которые пытались создать свой сайт. HTML-код — это как другой язык. А что вы испытываете, глядя на текст, написанный на другом языке, совершенно вам не знакомом? То же самое испытывает и чайник, увидев в первый раз HTML-код. Да что я вам рассказываю. Вы это и без меня знаете.

Вот он первый психологический барьер: «Я ЭТО никогда не пойму!». Но не все так беспросветно.

Преодолеть этот барьер помогают такие программы, как FrontPage, Dreamweaver и т.д. Эти программы являются визуальными редакторами WISIWIG (What I See Is What I Get — что вижу, то и получаю). То есть то, что вы видите на экране при создании сайта в этих редакторах, вы потом и получите при просмотре сайта в браузере. Тут все просто, никаких HTML-кодов и прочих сложностей. Ну, мои дорогие критики, поняли теперь, почему я за эти редакторы так держалась? То-то же. Психология! 🙂

Перед людьми, преодолевшими первый психологический барьер, стоят уже другие задачи. Они начинают задумываться, как сделать так, чтобы сайт быстрее загружался, выглядел лучше… А возможности редакторов все-таки ограничены и некоторые проблемы они не решат. И вообще, со временем становится просто интересно, «что же там внутри». Тогда, постепенно уже начинаешь смотреть и внутрь страницы, в ее HTML-код, пытаться понять, как там все устроено.

Итак, поняв устройство HTML-кода и узнав основные теги, можно без труда исправлять любую неполадку, возникшую на сайте. Уже идет не создание, а совершенствование сайта. Можно изучать другие технологии, более сложные, чем HTML, которые облегчат работу…

Да, визуальные редакторы все же не идеальны и порой генерируют много лишнего HTML-кода. Но это ведь программы, что с них возьмешь :). Конечно, их разработчики с каждой новой версией делают их все совершеннее, но лишний код пока остается. И, знаете, скажу я вам по секрету, частенько это бывает вовсе не по вине программы. Тут играет роль, как говорят в сводках новостей, и человеческий фактор. Поняли? На вас намекаю 🙂

Прежде чем приступать к процессу «избавления от лишнего», стоит понять, как же они появляются, эти лишние HTML-теги.

Самая распространенная ошибка, которую может совершить создатель сайта — это писать свои гениальные тексты в программе Microsoft Word. Многие делают это «по привычке». Тексты пишут в Word’e, а потом вставляют их во FrontPage или в другой визуальный редактор. Эта очень вредная привычка для создателей сайта.

Word удобен для написания и редактирования текста, с этим сложно спорить. Но он совершенно не предназначен для того, чтобы размещать написанное в нем на Web-страницах. Он генерирует не много, а просто ОЧЕНЬ много лишнего кода. И легче переписать текст заново, чем очищать его от обилия ненужных тегов.

Конечно, никто не запрещает писать тексты в Word’e, хотя их спокойно можно писать и во FrontPage или в Dreamweaver’e. Но тогда между Word’ом и визуальным редактором должен быть «очистительный пункт». Этим пунктом может стать обычный Блокнот, которые есть на каждом компьютере, где установлена операционная система Windows.

Если уж вам так нравится Word, то пишите в нем на здоровье. Только скопированный из него текст вставляйте сначала в Блокнот. И только после этого копируйте текст из Блокнота в визуальный редактор. Вот и все. Правда, всякие выделения жирным, курсивом, другим цветом и т.д. стираются, но ничего не мешает снова сделать их, но уже в визуальном редакторе.

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

Их можно понять, кому охота делать лишнюю работу только потому что какие-то там программы решили, что нужно вставить дополнительные теги. Хотя сами программы, по идее, все правильно делают, даже очень логично.

Вот, к примеру, два META-тега, которые программа FrontPage добавляет сразу же:

<meta http-equiv=»Content-Language» content=»ru»>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

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

FrontPage еще может добавить такие чисто информативные теги, как:

<meta name=»ProgId» content=»FrontPage.Editor.Document»> <meta name=»GENERATOR» content=»Microsoft FrontPage 4.0″>

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

Продолжим с FrontPage. Вообще, FrontPage, как было доказано опытным путем, добавляет больше «своего», чем, скажем, Dreamweaver, но и Dreamweaver тоже, как говорится, «не без греха». Итак, представим, пишите вы во FrontPage такой текст:

Я изучаю HTML

Вроде бы ничего особенного. Но когда вы писали слово HTML, вы поменяли раскладку клавиатуры. И FrontPage почему-то решил, что это нужно обязательно отметить. В HTML-коде видим следующее:

Я изучаю <span lang=»en-us»>HTML</span>

Кошмар, да? Причем, странное дело, эта не очень приятная метка появилась только во FrontPage 2003. В предыдущих версиях ничего подобного не было. Хотя, надо заметить, в FP 2003 много других очень полезных нововведений, так что этот маленький недостаток простителен.

Лишние теги могут также появиться вследствие не совсем правильного обращения с программой. Например, вы написали какой-то текст и решили его дополнительно выделить, сделав не черным, а, предположим, красным.

Для этого вы нажали на кнопку на панели Форматирование, которая выглядит как буква A и выбрали там красный цвет. Потом вы посмотрели-посмотрели и решили, что красный – это слишком ярко и текст, пожалуй, можно снова сделать черным. Тогда вы снова нажали на кнопку в виде буквы A и выбрали там черный цвет. Все вроде бы логично и правильно, но не совсем. Вот он, человеческий фактор 🙂

FrontPage во время ваших нажатий генерировал HTML-код. И знаете, как это выглядело? Вот вы написали текст, HTML-код выглядел просто :

Текст, текст, текст…

Потом Вы решили выделить текст красным цветом, нажали на соответствующую кнопку и выбрали красный цвет. FrontPage в результате этих действий сделал в HTML-коде следующее:

<font color=»#FF0000″>Текст. текст, текст…</font>

Затем Вы передумали и снова сделали текст черным. FrontPage, в точности выполнил ваши указания, прописав в HTML-коде:

<font color=»#0000″>Текст. текст, текст…</font>

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

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

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

<p align=»center»><font color=»#000000″ face=»Book Antiqua» size=3>Правильно поставленные вопросы</font> – <font size=3>половина обучения</font><font color=»#000000″ face=»Book Antiqua» size=3>.</font><br>
<font color=»#000000″ face=»Book Antiqua» size=3><b>
© Хадис</font></b>

<p align=»center»><font color=»#000000″ face=»Book Antiqua» size=3>Мир счастливого – иной, чем мир несчастного</font><font color=»#000000″ face=»Book Antiqua» size=3>.</font><br>
<font color=»#000000″ face=»Book Antiqua» size=3><b>© Людвиг Витгенштейн</font></b>

Этот код довольно просто сократить, убрав повторения тегов, цвет и размер текста (эти установки — по умолчанию, их не обязательно прописывать в HTML-коде). Результат:

<div align=»center»><font face=»Book Antiqua»>

<p>Правильно поставленные вопросы – половина обучения.<br>
<b>© Хадис</b>

<p>Мир счастливого – иной, чем мир несчастного.<br>
<b>© Людвиг Витгенштейн</b>

</div></font>

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

<font color=»#FF0000″>Текст, текст, текст…</font>

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

<font color=»#FF0000″><font face=»Arial»>Текст, текст, текст…</font></font>

Второй «font» уже лишний, так как для одного тега можно указать несколько атрибутов. Так, сокращенный HTML-код выглядит так:

<font color=»#FF0000″ face=»Arial»>Текст, текст, текст…</font>

Ну что, испугались? Вообще-то, во FP 2003 этот недостаток исправлен. И открывай вы и закрывай документ по сто раз, все равно новый тег создаваться не будет. А атрибуты будут добавлены к уже существующему.