HTML CompDocs

На различных форумах и конференциях не перестают появляться одни и те же вопросы от начинающих вебмастеров. Одним из самых частых из них является вопрос выбора учебника по HTML.

Данный цикл статей обучит Вас усскуству использования HTML с самого начала. Конечно, не стоит надеется на слово "обучит". Без труда Вы в любом не сможете добиться чего-либо. Однако, я, полагаясь на личный многогодовой опыт работы, сделаю все что возможно для того, чтобы облегчить процесс изучения.

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

Ну что же, с целью мы ознакомились, пора в путь.

Так что же такое HTML? HTML (HyperText Markup Language - язык маркировки гипертекстов) - язык разметки гипертекстового документа. Говоря проще, это набор средств для описания визуальных свойств (позиция, размер, цвет и т.д.) различных элементов, в частности текста или графики. Чтобы не скакать от термина к термину, скажу лишь что под гипертекстовым документом подразумеваются документы с гипертекстовыми ссылками - указателями на другие гипертекстовые документы.

HTML документ в самом простом случае представляет собой один текстовый файл с разширением .htm или .html - никакой разницы между ними нету, можете использовать то, которое Вам больше нравится. Создавать HTML мы будем с вами при помощи текстового редактора. Сам я использую стандартный Блокнот - в нем делаю все, и ru-coding.com, и CompDocs, все 4 рассылки и т.д. - в общем все HTML документы я создаю в нем, поэтому и вы можете смело его использовать. Конечно, при желании, вы можете воспользоваться любым другим текстовым или HTML редактором. Только не стоит использовать программы, которые добавляют форматирование (например, Word). Это такие программы в которых можно, например выделить часть текста жирным фоном или вставить картинку - все это испортит наш файл, нам необходим чисто текстовый редактор.

Каждый HTML документ, составленый в соответствии синтаксису, содержит заголовок и тело. Вот пример простого HTML документа:

<HTML>

<HEAD>
</HEAD>

<BODY>
</BODY>

</HTML>
Если все это сохранить в отдельном файле и назвать его, например, primer.html и открыть браузером, вы увидите... ничего вы не увидите - белый экран :). Чуть позже мы разберемся что тут для чего. А пока нам нужно ознакомится с таким понятием, как тэги.

Разметка в HTML производится с помощью специального набора команд - тэгов. Честно говоря, я выучил HTML от и до без эдиной книги - просто открывал код обычных веб-страничек и изучал. По этому, мои термины - те, которые я не встречал в явном виде, могут немного отличаться от книжных, но это не столь важно, ведь главное - умение, а не знание. Так что я различаю два типа тегов: региональные и местные.

Если вы посмотрите на предыдущий пример HTML документа, то там можно выделить 3 разных тега, но все они одного типа. Итак, первый - тэг <HTML> - открывающий тэг и его закрывающий тэг </HTML>. Данные тэги в соответствии с синтаксисом HTML обозначают HTML документ. Однако, стоить отметить что они вовсе не обязательны - их роль чисто информационная - дать человеку, просматривающему HTML код понять что это HTML документ :). Т.е. в описании их действия можно было бы сказать что они выделяют HTML код - т.е. все что начинается после открывающего тэга <HTML>, вплоть до закрывающего тэга </HTML>, является HTML документом и его следует компилировать и отображать браузеру. Однако, как я уже говорил, назначение тэгов чисто информационное и они не имеют никакого действия на браузеры. Вобще, следует отметить, что HTML, в отличии от языков программирования, не требует каких-либо строгих или нестрогих норм синтаксиса. Синтаксис в HTML присутствует, однако, его вовсе не обязательно соблюдать. Ну это так, информация к размышлению, а нам то зачем заведомо учиться не по синтаксису? Темболее, что на самом деле это очень хорошая штука - вы с легкостью сможете читать HTML код любого сайта, не зависимо от того создан он тем-то или тем-то или даже сгенерирован.

Возможно, не все читатели знакомы со значением столь часто используемого мною слова, как синтаксис. Энцеклопедическое описание слова синтаксис [<гр. syntaxis - составление] - лингв. чать грамматики, изучающая сочетания слов в предложении неплохо подходит под наше понятие. В частности, под синтаксисом нужно понимать какое-то упорядоченое применение зарезервированных слов, в нашем случае - тэгов. Заразервированные слова, это слова синтаксиса, которые используются для описания структуры самого HTML кода. Например, тэг <HTML> является зарегистрированным словом в синтаксисе HTML (как вы уже знаете, он указывает на HTML документ). При этом, в процессе компиляции, все зарезервированные слова обрабатываются браузером, и, как правило, сами не отображаются в браузере. Вспомните первый пример - там аж 6 тэгов (3 открывающих и 3 закрывающих), при этом, в результате открытия файла браузером, мы не видим в нем ни тэгов, ни даже текста: компилятор обрабатывает зарегистрированные слова, в соответствии с синтаксисом. А чтобы отобразить зарезервированное стово <HTML> в том HTML документа, который вы сейчас читаете, в виде текста, я прибегнул к специальным методам, о которых мы поговорим в следующих уроках. Пожалуй, что сейчас еще следует отматить, так это термин компиляция. Под компилящией мы будем подразумивать процесс обработки браузером HTML файла с целью получения графического изображения - того что мы видим в экране браузера.

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

Именно в тэг BODY и записывается практически все HTML содержание странички. Для этого существует множество различных тэгов. Сегодня мы рассмотрим некоторые тэги форматирования текста, а имеено, тэги b, i, u. Все эти тэги являются региональными тэгами. А это значит что они существуют открывающие и закрывающие, и все что между открывающем и закрывающим тэгом, подпадает под его влияние. Давайте наберем следующий HTML код:

<HTML>

<HEAD>
</HEAD>

<BODY>

Это простой текст <b>,а этот текст выделен жирным</b>, <i>это уже курсив</i> <u>, ну и подчеркнутый текст.<u>

</BODY>

</HTML>
Сохраним его в каком-нибуть .html файле, например primer.html и откроем браузером. Вы должны увидеть примерно такое:

Это простой текст ,а этот текст выделен жирным,, это уже курсив, ну и подчеркнутый текст.

Как выдно, тэг b делает текст жирным, тэг i оформляет его как курсив, а тэк u подчеркивает текст. Важно понимать, что на самом деле, в HTML коде текстовая информация является вот какая: "Это простой текст ,а этот текст выделен жирным,, это уже курсив , ну и подчеркнутый текст.", все остальные тэги лишь настраивают ее отображение. Заметьте, что текст начинается жирным сразу после открывающего тэга b и вплодь до закрывающего b. А что будет, если сделать, вот такое:

<HTML>

<HEAD>
</HEAD>

<BODY>
<b><i><u>Это жирный, курсивный и одновременно подчеркнутый текст!</u></i></b>

</BODY>

</HTML>
Да, правильно, будет во такое:

Это жирный, курсивный и одновременно подчеркнутый текст!

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

<HTML>

<HEAD>
</HEAD>

<BODY>
<b><i>обратите внимание</b> как <u>отображение</u> тек<b>ста</b> <u>зависит</i> от тэгов его форматирования</u>

</BODY>

</HTML>
Сохраните его в HTML файле и сами посмотрите на результаты.

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