Урок 3. Простейшая веб-страница
Давайте на этот раз займёмся чем-нибудь совсем практическим: например, построим HTML-страничку. Если вы уже инсталлировали Dreamweaver — это хорошо, но сегодня он нам не понадобится: воспользуемся старым добрым Notepad.
Зачем это нужно? На свете существует масса всяких разных редакторов HTML, начиная с FrontPage и заканчивая тем же Dreamweaver. Каждое уважающее себя офисное приложение предлагает сохранить документы в HTML-формате или даже сразу публиковать их на веб-сервере. Но мы так делать не будем. А почему?
Да потому, что прежде любого визуального редактирования, которое не требует углублённых знаний, нужно потрогать HTML руками. Потом — немного позже — вы научитесь экономить своё время, делая странички в Dreamweaver, но и тогда вам нередко придётся редактировать код вручную, а это будет очень и очень непросто без хорошего знания языка разметки.
Однажды меня попросили исправить ссылки в веб-страничках для внутреннего пользования, которые секретарь делала в MS Word и складывала в особую папочку на сервере компании. Ссылочки почему-то исправляться не хотели, и я заглянул в код. Крестная сила! Я надеюсь, мне больше никогда в жизни не придётся увидеть ЭТО. Странички, каждая из которых содержала 3–4 абзаца текста, занимали по 200–300 килобайт каждая: Word при сохранении документов в формате HTML добавлял в файлы чудовищное количество соверщенно дурацкой разметки, из-за которой исходный текст просто невозможно было обнаружить.
Никогда не делайте веб-странички с помощью инструментов, которые для этого не предназначены.
Первый опыт
Откройте Notepad. Набейте приведённый ниже код (лучше не копировать, а всё-таки потрогать руками). Сохраните файл с именем test.html. А теперь откройте его браузером. Что получилось?
<HTML>
<HEAD>
<TITLE>Добро пожаловать в гости!</TITLE>
</HEAD>
<BODY>
<H1>
Привет всем!<BR>
Меня зовут Линус Торвальдс.
</H1>
<HR align="left" width="300">
<P>
Вот это моя любимая ссылка:
</P>
<P>
<A href="http://www.microsoft.com/">Сайт дяди Билли.</A>
</P>
<P>
До свидания!
</P>
<HR align="left" width="300">
<P>
© Моё это, никому не отдам.
</P>
</BODY>
</HTML>
Браузер показывает страницу, часть текста которой совпадает с тем, что вы напечатали, но большая часть информации кажется безвозвратно потерянной. В чём же дело?
На самом деле всё очень просто. В приведённом примере вся кириллица относится к тому, ЧТО должен показывать браузер на страничке. А практически вся латиница описывает то, КАК это нужно делать. И именно она и представляет собой язык описания веб-страниц: HTML.
Что же такое HTML?
HTML также называют языком гипертекстовой разметки. Собственно, по-английски он и есть HyperText Markup Language. Приставка ГИПЕР обозначает, что то, с чем мы в данном случае имеем дело — больше чем просто текст. И действительно. Взять хотя бы всем известные ССЫЛКИ: разве вы встречали что-то подобное в обычных текстовых файлах? ;-)
Говоря по-русски, мы берём текст, и, используя специальную разметку в виде ключевых слов (ТЕГОВ) и некоторых других вспомогательных конструкций, объясняем браузеру, как он должен выглядеть. В общем случае, конечно, мы говорим не просто о тексте, а о КОНТЕНТЕ (содержимом) веб-страниц, который, кроме того, может включать в себя картинки, формы и разного рода внедрённые объекты, скажем — ролики Flash, апплеты Java или элементы ActiveX. Но об этом позже.
Итак, повторяю ещё раз: HTML — это набор инструкций, предписывающих программе для просмотра веб-страниц (браузеру) правила отображения КОНТЕНТА. Конечно, все браузеры делают это немного по-разному, но куда уж деваться! На мой взгляд, лучше всех с хэтой задачей справляется Microsoft Internet Explorer версии 4 и выше (ой, заклюют! ;-) или, на худой конец, Mozilla Firefox. Но что же значит «лучше»?
Способы описания веб-страниц не исчерпываются языком HTML. Существует масса других наборов инструкций, например JavaScript, VBScript, CSS… перечисление может затянуться надолго. Так вот, существуют специальные дяди (и тёти), которые специально занимаются тем, что разрабатывают стандарты для каждой из множества веб-технологий. Естественно, они делают это не как бог на душу положит, а со знанием дела. Эта весёлая компания называется W3C World Wide Web Consortium, и уж если они о чём-то сказали, что должно быть именно так и не иначе, то господа производители браузеров (Microsoft, Netscape, AOL и иже с ними) должны извинить, подвинуться и сделать свой браузер точно по инструкции. Но… ничто не совершенно под луной, и все делают по-своему. Майкрософт делает свой новый браузер примерно соответствующим требованиям консорциума, касающимся стандарта языка HTML и сопутствующих ему. Вот это я и имел в виду.
С тех пор, как этот урок увидел свет, ситуация слегка изменилась. Firefox поддерживает стандарты во многом лучше IE, хотя и он не без греха. Аутсайтер — Opera, но она зато лучше всех рендерит картинки. Вот так.
Но это всё слова, и умений у нас с вами от теоретизирования не прибавится. Давайте теперь попробуем разобраться, что именно содержала наша тестовая страничка.
Разбор полётов
Прежде всего давайте заглянём в самое начало странички и в её конец. Что мы видим?
<HTML>
...
</HTML>
Итак, каждый тег языка HTML обрамляется угловыми скобками, указывающими браузеру, что последовательность символов, заключённая в такие скобки, есть ключевое слово.
Здесь необходимо ввести ещё одно понятие. Большинство тегов является КОНТЕЙНЕРАМИ, т. е. фактически в исходном тексте страницы они встречаются парами, состоящими из открывающего (<HTML>) и закрывающего (</HTML>) тегов, между которыми находится контент, подчиняющийся правилам форматирования, характерным для данного тега. Закрывающий тег отличается от открывающегося наличием косой черты (слэша) после угловой скобки.
Не все теги отвечают за отображение контента, некоторые из них используются для разбивки гипертекста на блоки, несущие различную функциональную нагрузку. Например, пара тегов <HTML>...</HTML> обозначает, что всё, находящееся внутри пары, должно интерпретироваться как гипертекст. Собственно, эта пара тегов обязательна для использования и содержится в исходном коде любой веб-страницы, помечая её начало и конец.
В нашем примере далее следует контейнер <HEAD>...</HEAD>. Эта часть называется блоком заголовка и практически всегда содержит неотображаемую информацию, за исключением тега <TITLE>, который также является контейнером, но содержит строку, отображающуюся в заголовке окна браузера во время просмотра страницы.
Следующий блок (контейнер <BODY>...</BODY>) включает в себя отображаемую часть страницы, её тело. Он, помимо текста, содержит ещё немало тегов, наподобие <P>, <HR>, <H1>, <A> и т. д. Поговорим о них поподробнее.
Теги в HTML
Рассмотрим общий случай синтаксиса записи тега.
<TAG param1="value1" param2="value2">Something</TAG>
Заметим, что открывающий тег может содержать один или несколько параметров param1...paramN, которых может и не быть. Каждому из параметров присваивается значение value, заключённое в кавычки. Зачем нужны параметры? Возьмём конкретную реализацию.
<HR align="left" width="300">
Тег <HR> означает, что на его месте на веб-странице появится горизонтальная линия (Horisontal Ruler), разделяющая части контента, в нашем случае — абзацы текста. Закрывающий тег здесь отсутствет, т. к. тег <HR> не является контейнером: а что, по вашему, эта линия может содержать, кроме себя самой? ;-) Параметр align задаёт тип выравнивания (в данном случае выравнивания по левому краю текста), параметр width — длину линии в пикселах.
Возьмём другой пример.
<A href="http://www.microsoft.com/">Сайт дяди Билли.</A>
Этот тег определяет ссылку (Anchor). Он является контейнером, и между закрывающим и открывающим тегами в нашем случае находится текст, который будет выглядеть как ссылка (по умолчанию это означает подчёркивание и синий цвет текста). Параметр href принимает значение адреса, по которому вы перейдёте после щелчка мышью на этой ссылке. Просто, правда?
Пары тегов <P>...</P> обрамляют отдельные абзацы. Этот тег также может включать параметры, например align. Внутри контейнера <P>...</P> может встретиться одиночный тег <BR>, обозначающий «мягкий» перенос строки (без создания отдельного абзаца), или контейнер <NOBR>...</NOBR>, обозначающий, что браузер ни в коем случае не должен переносить или как-то иначе разрывать расположенный внутри этого контейнера текст. No breaks! Всё должно поместиться в одну строку вне зависимости от её длины. Пример — длинные однострочные заголовки в библиотеке Мошкова, вызывающие появление горизонтального скроллера.
Контейнер <H1>...</H1> мало отличается от контейнера <P>...</P>, но содержащийся в нём текст будет отображаться существенно более крупным шрифтом, поскольку этот тег специально предназначен для заголовком. Существуют также теги <H2>, <H3> и так далее до <H6>, с их помощью можно выделять заголовки разных уровней.
Нужно сделать ещё одну важную оговорку. Несмотря на то, что во всех примерах я пишу теги прописными буквами, язык HTML (в отличие, скажем, от JavaScript) не чувствителен к регистру. Не имеет значения, будете ли вы использовать также прописные буквы или для скорости ограничитесь строчными, браузер этого просто не заметит. Более того, параметры, значения которых не содержат пробелов, можно не заключать в кавычки, такой синтаксис тоже имеет право на существование: align=right. А вот то, что тег <P> можно использовать без закрывающего тега </P>, как об этом пишут в некоторых руководствах, я бы не рекомендовал принимать во внимание: всё-таки нужно пытаться быть последовательными, да и вообще привычка закрывать теги впоследствии сослужит вам добрую службу при изучении XML.
Ещё один не менее важный момент, имеющий самое прямое отношение к контейнеру <P> и иерархии заголовков <H1>–<H6>.
Представим себе, что мы создали документ, состоящий из большого количества абзацев, причём некоторые из них помечены как заголовки с помощью описанных выше тегов, но ни один из абзацев не использует параметров, прямо задающих свойства текста. Вопрос: ОТКУДА браузеру известно, каким шрифтом отображать тот или иной абзац, как соотносить кегль, использовать ли полужирный шрифт или курсив?
Каждый элемент веб-страницы, будь то картинка, абзац текста или что-то другое, имеет атрибут, называемый СТИЛЕМ и содержащий описание множества свойств этого элемента. Для каждого тега, будь то <P>, <H1>, <A> или <HR>, задан СТИЛЬ ПО УМОЛЧАНИЮ, известный браузеру, и именно этот стиль позволяет нам не тратить время на определение того, какой величины должна быть, скажем, отбивка между абзацами текста, а просто написать тег <P> и быть уверенными, что отбивка появится сама собой, и что она будет больше интерлиньяжа (межстрочного расстояния), что сделает текст более читабельным. Всё отлично. Если, конечно, значение, заданное по умолчанию, вас устраивает. ;-)
Если же значение какого-то параметра, заданное по умолчанию, вам не нравится, к вашим услугам таблицы стилей CSS. Но о них мы пока ничего не знаем, поэтому приходится пользоваться теми параметрами, которые можно задать с помошью HTML, наподобие align="left". Кстати, так можно изменить очень многое, поверьте! В части случаев этого вполне достаточно. А вот за списком разрешённых параметров для каждого тега стоит обратиться к спецификации HTML от W3C. Сухой и сжатый материал — то, что надо!
Запомните правило номер один для языка HTML:
При отсутствии параметров элементов HTML, заданных явно, все значения берутся по умолчанию. Любой параметр, заданный разработчиком в явном виде, отменяет значение по умолчанию, не влияя на прочие свойства элемента.
Запомнили? То-то же. ;-)
…
Вы заметили, что мы успели разобрать практически всю тестовую страницу? Ах да, осталась одна странная закорючка…
<P>
© Моё это, никому не отдам.
</P>
И что бы это значило? А ведь можно было бы написать так:
<P>
© Моё это, никому не отдам.
</P>
Последовательность символов © однозначно определяет, что в этом месте в тексте страницы должен отобразиться знак копирайта. А почему бы его прямо так и не написать, как это сделано во втором примере? Тем более что и результат вроде один и тот же?
Да в том-то и дело, что не один и тот же. В зависимости от того, какую кодировку использует посетитель, какие шрифты установлены у него с системе… — да от чего угодно! — прямо прописанный символ авторского права может превратиться в какую-нибудь непонятную закорючку. А у нас с вами есть прекрасный способ этого избежать. Который мы и использовали. Кстати, для каждого символа, не входящего в «стандартную поставку», есть такое обозначение. Хотите ещё одно? Дарю.
Символ — от английского non-breaking space. Что он обозначает? Да почти ничего. Обычный неразрывный пробел, тот, который в русском наборе стоит перед тире и между всякими «В. И. Ленин» и «т. п.» и в Word набирается как Ctrl+Shift+пробел. Вы не в курсе, что там нужны пробелы? Всю жизнь писали без них? Бывает. Я вот одного своего приятеля второй год пытаюсь убедить, что запятая в тексте должна отбиваться пробелом справа, а не слева. Не верит. А в книжку посмотреть лень: чукча не читатель, чукча электронный писатель. Кстати, о правилах предпечатной подготовки текстов — и особенностях разных языков — мы как-нибудь ещё поговорим…
Заключение
Естественно, мы ещё не раз вернёмся к языку HTML… да что там, вряд ли хотя бы один урок обойдётся без него. Но я считаю, что изложенного выше уже достаточно для того, чтобы понять, как устроены веб-страницы, и пойти дальше, прибегая лишь к помощи спецификации HTML от W3C. Думаю, после прочтения этого текста очень полезно было бы полистать именно спецификацию, и посмотреть, какие на свете бывают теги и зачем они нужны. А счастливые владельцы Dreamweaver 4.0 могут сделать это прямо в оффлайне, т. к. эта версия популярной программы снабжена ИЗУМИТЕЛЬНЫМ хелпом по HTML, CSS и JavaScript.
А уж самый лучший способ разобраться, что можно сделать с помощью языка HTML, — пойти на понравившуюся вам страничку, открыть её исходный код при помощи команды меню View | Source и попробовать понять, как реализована та или иная конструкция.
Тем не менее, HTML не исчерпывает возможности веб-дизайна. На следующем урока мы поговорим о языке СЦЕНАРИЕВ ПОВЕДЕНИЯ веб-страниц, иначе говоря — о скриптах. Ведь именно они позволяют странице чутко реагировать на каждое ваше действие, в лучшем случае предугадывая ваши желания и предлагая помочь, а в худшем — производя массу ненужных и раздражающих эффектов, разражаясь сериями выскакивающих из ниоткуда баннеров или выпуская на экран череду мыльных пузырей, начинающих гоняться за курсором.
Впрочем, это уже совсем другая история…
Урок 2. Эскизы | Урок 4. Основы JavaScript
наверх
|  |
|
