Библиотека Интернет Индустрии I2R.ru

• Предыдущий материал - Основы web-дизайна. Эскизы.

Давайте на этот раз займёмся чем-нибудь совсем практическим: например, построим HTML-страничку. Если вы уже инсталлировали Dreamweaver -- это хорошо, но сегодня он нам не понадобится: воспользуемся старым добрым Notepad'ом.

Зачем это нужно? На свете существует масса всяких разных редакторов HTML, начиная с FrontPage и заканчивая тем же Dreamweaver'ом. Каждое уважающее себя офисное приложение предлагает сохранить документы в HTML-формате или даже сразу публиковать их на веб-сервере. Но мы так делать не будем. А почему?

Да потому, что прежде любого визуального редактирования, которое не требует углублённых знаний, нужно потрогать HTML руками. Потом -- немного позже -- вы научитесь экономить своё время, делая странички в Dreamweaver, но и тогда вам нередко придётся редактировать код вручную, а это будет очень и очень непросто без хорошего знания языка разметки.

Однажды меня попросили исправить ссылки в веб-страничках для внутреннего пользования, которые секретарь делала в MS Word'е и складывала в особую папочку на внутреннем сервере компании. Ссылочки почему-то исправляться не хотели, и я заглянул в код. Крестная сила! Я надеюсь, мне больше никогда в жизни не придётся увидеть ЭТО. Странички, каждая из которых содержала 3-4 параграфа текста, занимали по 200-300 килобайт каждая: Word при сохранении документов в формате HTML добавлял в файлы чудовищное количество какой-то дурацкой разметки, из-за которой исходный текст просто невозможно было обнаружить.

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

Первый опыт

Откройте Notepad. Набейте приведённый ниже код (лучше не копировать, а всё-таки потрогать руками). Сохраните файл с именем test.html. А теперь откройте его браузером. Что получилось?

Браузер показывает страницу, часть текста которой совпадает с тем, что вы напечатали, но большая часть информации кажется безвозвратно потерянной. В чём же дело?

На самом деле всё очень просто. В приведённом примере вся кириллица относится к тому, ЧТО должен показывать браузер на страничке. А практически вся латиница описывает то, КАК это нужно делать. И именно она и представляет собой язык описания веб-страниц: HTML.

Что же такое HTML?

HTML также называют языком гипертекстовой разметки. Собственно, по-английски он и есть HyperText Markup Language. Приставка ГИПЕР обозначает, что то, с чем мы в данном случае имеем дело -- больше чем просто текст. И действительно. Взять хотя бы всем известные ССЫЛКИ: разве вы встречали что-то подобное в обычных текстовых файлах? ;-)

Говоря по-русски, мы берём текст, и, используя специальную разметку в виде ключевых слов (ТЕГОВ) и некоторых других вспомогательных конструкций, объясняем браузеру, как он должен выглядеть. В общем случае, конечно, мы говорим не просто о тексте, а о КОНТЕНТЕ (содержимом) веб-страниц, который, кроме того, может включать в себя картинки, формы и разного рода внедрённые объекты, скажем -- ролики Flash, апплеты Java или элементы ActiveX. Но об этом позже.

Итак, повторяю ещё раз: HTML -- это набор инструкций, предписывающих программе для просмотра веб-страниц (браузеру) правила отображения КОНТЕНТА. Конечно, все браузеры делают это немного по-разному, но куда уж деваться! Лучше всех с задачей справляется Microsoft Internet Explorer версии 4 и выше. Что же значит «лучше»?

Способы описания веб-страниц не исчерпываются языком HTML. Существует масса других наборов инструкций, например JavaScript, VBScript, CSS... перечисление может затянуться надолго. Так вот, существуют специальные дяди (и тёти), которые специально занимаются тем, что разрабатывают стандарты для каждой из множества веб-технологий. Естественно, они делают это не как бог на душу положит, а со знанием дела. Эта весёлая компания называется W3C World Wide Web Consortium, и уж если они о чём-то сказали, что должно быть именно так и не иначе, то господа производители браузеров (Microsoft, Netscape, AOL и иже с ними) должны извинить, подвинуться и сделать свой браузер точно по инструкции. Но... ничто не совершенно под луной, и все делают по-своему. Майкрософт делает свой новый браузер примерно соответствующим требованиям консорциума, касающимся стандарта языка HTML и сопутствующих ему. Вот это я и имел в виду.

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

Разбор полётов

Прежде всего давайте заглянём в самое начало странички и в её конец. Что мы видим?

Итак, каждый тег языка HTML обрамляется угловыми скобками, указывающими браузеру, что последовательность символов, заключённая в такие скобки, есть ключевое слово.

Здесь необходимо ввести ещё одно понятие. Большинство тегов является КОНТЕЙНЕРАМИ, т. е. фактически в исходном тексте страницы они встречаются парами, состоящими из открывающего (<HTML></HTML>) тегов, между которыми находится контент, подчиняющийся правилам форматирования, характерным для данного тега. Закрывающий тег отличается от открывающегося наличием косой черты (слэша) после угловой скобки.

Не все теги отвечают за отображение контента, некоторые из них используются для разбивки гипертекста на блоки, несущие различную функциональную нагрузку. Например, пара тегов <HTML> ... </HTML> обозначает, что всё, находящееся внутри пары, должно интерпретироваться как гипертекст. Собственно, эта пара тегов обязательна для использования и содержится в исходном коде любой веб-страницы, помечая её начало и конец.

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

Следующий блок (контейнер <BODY> ... </BODY>) включает в себя отображаемую часть страницы, её тело. Он, помимо текста, содержит ещё немало тегов, наподобие <P>, <HR> <H1>, <A> и т. д. Поговорим о них поподробнее.

• Предыдущий материал - Основы web-дизайна. Эскизы.