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

• Предыдущий материал - Основы web-дизайна. Простейшая веб-страница. Первый опыт.

Теги в HTML

Рассмотрим общий случай синтаксиса записи тега.

Заметим, что открывающий тег может содержать один или несколько параметров param1 ... paramN, которых может и не быть. Каждому из параметров присваивается значение value, заключённое в кавычки. Зачем нужны параметры? Возьмём конкретную реализацию.

Тег <HR> означает, что на его месте на веб-странице появится горизонтальная линия (Horisontal Ruler), разделяющая части контента, в нашем случае -- параграфы текста. Закрывающий тег здесь отсутствет, т. к. тег <HR> не является контейнером: а что, по вашему, эта линия может содержать, кроме себя самой? ;-) Параметр align задаёт тип выравнивания (в данном случае выравнивания по левому краю текста), параметр width -- длину линии в пикселах.

Возьмём другой пример.

Этот тег определяет ссылку (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, заданных явно, все значения берутся по умолчанию. Любой параметр, заданный разработчиком в явном виде, отменяет значение по умолчанию, не влияя на прочие свойства элемента.

Запомнили? То-то же. ;-)

...

Вы заметили, что мы успели разобрать практически всю тестовую страницу? Ах да, осталась одна странная закорючка...

Последовательность символов © однозначно определяет, что в этом месте в тексте страницы должен отобразиться знак копирайта. А почему бы его прямо так и не написать, как это сделано во втором примере? Тем более что и результат вроде один и тот же?

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

Символ   -- от английского non-breaking space. Что он обозначает? Да почти ничего. Обычный неразрывный пробел, тот, который в русском наборе стоит перед тире и между всякими «В. И. Ленин» и «т. п.» и в Ворде набирается как Ctrl+Shift+пробел. Вы не в курсе, что там нужны пробелы? Всю жизнь писали без них? Бывает. Я вот одного своего приятеля второй год пытаюсь убедить, что запятая в тексте должна отбиваться пробелом справа, а не слева. Не верит. А в книжку посмотреть лень: чукча не читатель, чукча электронный писатель. Кстати, о правилах предпечатной подготовки текстов -- и особенностях разных языков -- мы как-нибудь ещё поговорим...

Заключение

Естественно, мы ещё не раз вернёмся к языку HTML... да что там, вряд ли хотя бы один урок обойдётся без него. Но я считаю, что изложенного выше уже достаточно для того, чтобы понять, как устроены веб-страницы, и пойти дальше, прибегая лишь к помощи спецификации HTML от W3C. Думаю, после прочтения этого текста очень полезно было бы полистать именно спецификацию, и посмотреть, какие на свете бывают теги и зачем они нужны. А счастливые владельцы Dreamweaver'а 4.0 могут сделать это прямо в оффлайне, т. к. эта версия популярной программы снабжена ИЗУМИТЕЛЬНЫМ хелпом по HTML, CSS и JavaScript.

А уж самый лучший способ разобраться, что можно сделать с помощью языка HTML, -- пойти на понравившуюся вам страничку, открыть её исходный код при помощи команды меню View | Source и попробовать понять, как реализована та или иная конструкция.

Тем не менее, HTML не исчерпывает возможности веб-дизайна. На следующем урока мы поговорим о о языке СЦЕНАРИЕВ ПОВЕДЕНИЯ веб-страниц, иначе говоря -- о скриптах. Ведь именно они позволяют странице чутко реагировать на каждое ваше действие, в лучшем случае предугадывая ваши желания и предлагая помочь, а в худшем -- производя массу ненужных и раздражающих эффектов, разражаясь сериями выскакивающих из ниоткуда баннеров или выпуская на экран череду мыльных пузырей, начинающих гоняться за курсором.

Впрочем, это уже совсем другая история....

• Предыдущий материал - Основы web-дизайна. Простейшая веб-страница. Первый опыт.