Форматируем текст ХТМЛем

Оглавление

• Вникаем
  
  
  • Как вникать?
  • Что такое HTML?
  • Тэги
  • Свойства (атрибуты) тэгов
  • Текст среди тэгов
  • Сущности
  • Комментарии
  • Структура HTML-документа
    
    
    • Обязательная часть
    • Опциональные части
      
      
  • Правила хорошего тона (оформление исходника HTML)
    
    
• Форматируем
  
  
  • Простенько
    
    
    • Текст
      (тэги B, I, EM, STRONG, P, BLOCKQUOTE, BR, NOBR, H1, H2, H3, H4, H5, H6, PRE)
    • Ссылки
      (тэг A)
    • Картинки
      (тэг IMG)
    • Списки
      (тэги UL, OL и LI)
    • Таблицы
      (тэг TABLE)
    • Прочее
      (тэги HR, SPAN, DIV, BODY)
      
      
  • Со вкусом (немного о стилях)
    
    
    • Свойство style
    • Тэг STYLE
    • Свойство class
    • Контекстные стили и назначение стиля нескольким элементам
    • Файлы стилей
    • Каскадность стилей

---

Вникаем

 

Как вникать?

 

Все, что здесь рассказано — рассказано лишь в общем и целом, в стиле «как оно бывает». В расчете на то, что ты не поленишься лазить за подробностями в свой любимый справочник.

Справочников существует навалом. Чтобы не сорить ссылками, рекомендую один, являющийся первоисточником для всех прочих: http://w3c.org. (W3C является организацией, разрабатывающей и утверждающей различные интернет-стандарты, в том числе HTML)

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

Теперь — самое время вникать.

Что такое HTML?

 

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

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

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

Тэги — это элементы размеченного текста, которые и описывают разметку. То есть, чтобы разметить текст, нужно всего лишь внести в него тэги, обозначив ими, что и как должно быть помечено. Тэг — это что-то вроде специального слова, означающего «отсюда начинается текст, который надо размечать так-то» или «здесь кончается объявленная ранее разметка». Но подробнее об этом чуть дальше.

Итак текст, размеченный при помощи HTML является вполне обычным текстом. И хранится этот текст, как правило, в HTML-файле.

HTML-файл — это обычный текстовый файл, который можно просматривать и редактировать любым текстовым редактором. Главное, что HTML-файл содержит не просто текст, а текст HTML-размеченный. Обычно HTML-файлы имеют расширение htm или html.

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

Но не нужно сходу кидаться на поиски самого навороченного редактора и осваивать все его возможности. Само это освоение может отнять немало времени, так что давай сначала научимся хоть как-то ХТМЛить. Приобретя некоторый опыт, ты лучше поймешь, каких возможностей хочешь от редактора. Тем более, что практика показывает, что выигрыш от всяких дополнительных удобств не слишком-то велик — обычно более чем достаточно просто хорошего текстового редактора общего назначения. На крайний случай сойдет и Notepad. А вот всякие Word'ы-Wordpad'ы крайне не рекомендую — ведь мы собираемся работать с простыми текстовыми файлами, а не с офисными документами.

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

Открыть HTML-файл можно с помощью браузера (Internet Explorer, Opera, Mozilla, Netscape Navigator, или любом другом, установленном на твоем компьютере). Браузер (Browser) — это то, что в русских виндах почему-то называется «обозревателем». Чтобы открыть HTML-файл, обычно достаточно просто «запустить» его, например, двойным щелчком мыши. Для этого же можно использовать меню браузера «File —> Open...», или набрать в строке адреса file://полный_путь_к_твоему_файлу — протокол file позволяет адресовать локальные файлы.

Если осмотр результатов показал, что нужны какие-то исправления — переключаешься на окошко редактора и вносишь их. А потом — обратно на браузер и жмешь «обновить» (refresh). В Internet Explorer (IE или «ослик», если коротко) это действие подвешено на клавишу F5.

Хорошо, ну а как взглянуть в IE на исходник понравившейся страницы, расположенной в дебрях паутины? Очень просто — жмем правую кнопку мыши на любом пустом месте страницы и выбираем в выпавшем окошке «View source» (или через меню: View —> Source). Исходный текст страницы откроется в Notepad'е, откуда его можно сохранить.

Но если ты хочешь именно сохранить страницу к себе на компьютер — это можно сделать проще. Находясь на странице в меню «File» выбираем «Save as...». Нас интересуют два варианта сохранения:

• Web page, complete — сохранит как сам HTML-файл страницы, так и все не-HTML ресурсы (файлы стилей, картинки, скрипты и прочее), которые на этой странице используются. Все, кроме самой страницы будет сложено в каталог с именем, совпадающим с именем файла страницы, но без расширения и с допиской «_files». Например, ресурсы страницы myPage.html лягут в каталог myPage_files. Cама страница при этом тоже будет изменена. Все ссылки на сохраняемые ресурсы будут подправлены, чтобы указывать на их сохраненный вариант. А ссылки на те ресурсы, которые не будут сохранены (например, ссылки на HTML-файлы) будут исправлены так, чтобы при открытии сохраненной страницы они правильно указывали на эти ресурсы в интернет (дело в том, что ссылки могут быть относительными, и если их не поправить, то они станут указывать на несуществующие файлы).
  
  Чтобы лучше понять, что получится при таком сохранении, советую просто поэкспериментировать с ним, сравнивая результаты с результатами сохранения вторым вариантом.
• Web page, HTML only — сохранит только HTML-файл, безо всяких в нем изменений.

Одно замечание. Если понравившиеся тебе страницы используют какие-нибудь технологии, требующие поддержки со стороны веб-сервера (например SSI, ASP, JSP), то получить страницу в том виде, в каком ее создал автор ты не сможешь. Дело в том, что все эти технологии модифицируют содержимое страницы перед отправкой клиенту. То, что ты увидишь будет конечным результатом такой модификации, готовой HTML-страницей. В то время, как исходный файл может содержать по большей части используемые сервером инструкции по созданию страницы а не сам HTML-код.

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

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

Тэги

 

Что такое тэги и зачем они нужны мы уже говорили. А вот так тэги выглядят:

<tag_name>some text</tag_name>

Здесь:

• tag_name — имя тэга
• some text — участок текста отмеченный тэгами (иногда говорят «текст внутри тэга»)
• <tag_name> — открывающий тэг. Он указывает начало разметки.
• </tag_name> — закрывающий тэг. Он указывает конец разметки.
• Символ < обозначает начало описания открывающего тэга.
• Символы </ обозначают начало описания закрывающего тэга.
• Символ > обозначает конец описания любого тэга.

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

Регистр букв в именах тэгов игнорируется. Т.е. ты можешь писать их и маленькими буквами, и большими, и вперемежку — это не имеет значения. Хотя, конечно будет лучше если по крайней мере в пределах одного HTML-файла все тэги будут набраны в одном стиле.

Тэги могут быть вложенными:

<b>some text <i>some other text</i> text</b>

Но не могут быть перекрывающимися:

<b><i>Так неправильно!!!</b></i>

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

<b><i>Так правильно</i></b>

Когда один тэг вложен в другой, он добавляет к свойствам внешнего тэга свои собственные. Поэтому в последнем примере, где тэг b означает жирный шрифт, а тэг i — наклонный, текст внутри вложенного тэга i получается одновременно и жирным и наклонным, вот таким: Так правильно. Причем описание вида

<i><b>Так правильно</b></i>

даст тот же эффект.

Большинство тэгов должны быть парными, то есть, если уж появился открывающий тэг, далее обязательно должен присутствовать закрывающий с тем же именем. Но есть и тэги-одиночки (непарные), например, тэг <br>, обозначающий перевод строки, никогда не должен закрываться. И это логично — ведь перевод строки не помечает какую-то часть текста, он указывает не фрагмент, а просто позицию, где надо сделать переход на другую строку.

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

Тэги, по характеру отображения, могут быть блочными, строчными или неотображаемыми.

• Неотображаемые вместе со своим содержимым просто никак не отображаются и вообще не занимают места на странице, будто их и нет. Это могут быть тэги, хранящие какую-нибудь служебную информацию.
• Блочный тэг всегда занимает прямоугольный блок, шириной во весь экран, или во всю ширину другого блочного тэга, в котором данный находится. Как следствие, в одной строке не может быть двух блочных тэгов, даже если в HTML-коде они описаны на одной строке — всю доступную ширину займет первый из них, а второй будет перенесен на следующую строку.
  
  Вот пример двух блочных тэгов:
  (я специально задал им цвет фона, чтобы было видно занимаемое ими пространство)
  
  <div style = "background-color: yellow">желтый тэг div</div><div style = "background-color: lightgray">светло-серый тэг div</div>
  
  Так это выглядит на странице:
  
  
  желтый тэг div
  светло-серый тэг div
• Строчный тэг как правило занимает часть строки, но может быть частично перенесен на новую строку (там, где достигнет края экрана или блочного тэга, в который он вложен) и посему далеко не всегда имеет прямоугольную форму.
  
  Пример:
  
  <span style = "background-color: yellow">очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень длинный span, специально чтобы был хотя бы один перевод строки</span>
  
  Так он выглядит на странице:
  
  очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень длинный span, специально чтобы был хотя бы один перевод строки

Свойства (атрибуты) тэгов

 

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

Например:

<p align="center">some text</p>

Здесь тэг p имеет одно свойство align со значением center. Это свойство означает что текст внутри тэга p, отмечающего параграф, должен быть выровнен по центру. Т.е. мы имеем параграф с текстом, выровненным по центру.

Вот как это выглядит на странице:

some text

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

Имена свойств, как и имена тэгов нечувствительны к регистру.

Значение свойства может быть указано в двойных кавычках, как это показано в примере, в одинарных кавычках (апострофах), например так: align='center', или вообще без кавычек: align=center. Кавычки могут быть опущены, только если значение не содержит пробельных символов (это символы, которые не имеют начертания на экране — пробелы, символы табуляции, перевода строки и т.д.) и не содержит символа >, который указывает, что описание тэга окончено.

Значением может быть и число. И оно также может быть указано в кавычках, в апострофах, или без оных.

По сути, значение — это просто строка, содержащая описание свойства.

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

<table cellspacing = 0 cellpadding = 0 border = 0 width = "100%">

полностью эквивалентен тэгу

<table cellspacing = 0 width = "100%" border = 0 cellpadding = 0>

Как ты уже видел, свойства отделяются от имени тэга пробелом. Вообще говоря, они могут отделяться от него любым числом пробельных символов. Друг от друга они тоже отделяются любым числом пробельных символом. Также любое число пробельных символов может стоять между именем свойства и символом =, между символом = и значением свойства, между значением последнего из свойств и символом >, указывающим конец описания тэга. Но лучше все же писать тэги покомпактнее, а то немудрено и запутаться.

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

<i> </i>

абсолютно равнозначна записи в виде

<i><b></b></i>

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

Текст среди тэгов

 

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

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

Такое поведение браузера может показаться странным. Но на самом деле это очень удобно. С помощью специальных тэгов можно указывать и переводы строки, и наоборот — запрет перевода строки, задавать разбивку на параграфы, указывать выравнивание и отступы, и многое, многое другое. А поскольку в HTML-коде необходимо видеть структуру самой разметки (иначе очень легко запутаться и упустить часть закрывающихся тэгов), очень удобно выделять в исходнике эту самую структуру (делая отступы и переводы строк), что никак не будет влиять на отображение. (см. правила хорошего тона)

Кстати, если все же очень нужно сохранить в блоке текста все его родные переводы строк, пробелы, табуляции и прочие пробельные символы — существует специальный тэг PRE, позволяющий это сделать.

Сущности

 

У тебя наверняка уже возник вопрос — как компьютер не путается, где обозначены тэги, а где просто текст? Ведь и в тексте могут встретиться последовательности символов, точно такие же, какими описываются тэги. Как, например, понять — является ли <table> тэгом, или мы просто хотели получить слово table в угловых скобках?

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

Но что же делать, если нам нужна именно такая последовательность символов? — Использовать сущности. Они позволят не только избежать таких проблем, но и использовать в тексте различные символы, которых нет на клавиатуре.

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

&entityName;

Где entityName — имя сущности.

Т.е. любая сущность начинается символом &, за которым следует ее имя и заканчивается символом ; Учти, что между символом &, именем сущности, а также между именем сущности и символом ; не должно быть никаких других символов, в том числе и пробелов.

Наиболее распространенными являются следующие сущности:

• &lt; — знак меньше (<)
• &gt; — знак больше (>)
• &apos; — апостроф (')
• &quot; — двойные кавычки (")
• &amp; — амперсанд (&)
• &nbsp; — непрерываемый пробел

Непрерываемый пробел — это символ, который отображается точно также как обычный пробел, но при этом не считающийся пробельным символом. То есть те правила преобразования текста, которые касаются пробельных символов на него не действуют. Более того, в том месте, где стоит &nbsp; браузер не имеет права сделать перевод строки — этот символ, хоть и выглядит пробелом, понимается браузером скорее как буква.

Нередко &nbsp; используется как раз, чтобы запретить перенос, хотя для этого есть и другие методы (см. тэг NOBR). А вот задавать с помощью &nbsp; отступы более чем в один пробел является очень плохим стилем. Используй для создания отступов другие методы — о них мы поговорим позже.

Учти, что любая последовательность символов, начинающаяся со значка &, за которым следует буква, будет считаться браузером сущностью. Поэтому если тебе нужен сам знак амперсанда — используй соответствующую сущность &amp;

Конечно, я перечислил лишь очень малую часть доступных сущностей. Свою сущность имеют многие типографские значки, математические символы, символы разных алфавитов. Получить информацию об этих сущностях можно в справочнике http://w3c.org Набери в строке поиска "entities" (сущности) и получишь целый ряд документов, им посвященных. Например, http://www.w3.org/TR/REC-html40/sgml/entities.html

Символы сущностей входят в набор UCS-2 (таблицу кодов Unicode). Поэтому каждой сущности соответствует свой Unicode-код. А поскольку свое имя имеет далеко не каждый Unicode-символ, есть возможность получать эти символы по коду.

Например, сущность &#34; обозначает символ с кодом 34 и эквивалентна &quot; Заметь, сущности, содержащие код, начинаются с символов &#, за которыми идет код, а заканчиваются как обычно — точкой с запятой.

Иногда удобно задавать код не десятичным, а шестнадцатеричным числом. Выглядеть это будет, например, так: &#x22; — все тот же &quot;, он же &#34;

22 — это число 34 в шестнадцатеричном представлении. Буковка x после решетки нужна чтобы указать, что код шестнадцатеричный.

Комментарии

 

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

<!-- пример комментария -->

Комментарии, естественно, никак не отображаются на странице.

Как только браузер встретил последовательность символов, открывающую комментарий, он будет игнорировать любые символы, пока не встретит последовательность символов, закрывающую комментарий. Поэтому коментарии не могут быть вложенными.

Например:

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

Вот как этот код отобразится:

а этот текст окажется вне комментария -->

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

Еще комментарии могут использоваться, чтобы временно "убрать" какую-то часть страницы — ведь закомментирован может быть как текст, так и любые тэги. Главное следи, чтобы не нарушить комментарием структуру документа — не закомментировать, например, закрывающий тэг, оставив соответствующий открывающий вне комментария.

Структура HTML-документа

 

Теперь рассмотрим, что же собой представляет HTML-страница, она же HTML-документ, чисто технически.

Обязательная часть

 

Каждый HTML-документ должен иметь как минимум тэг html, внутри которого находится тэг body. Таким образом, минимальный пустой HTML-документ выглядит так:

<html>
<body>
</body>
</html>

html здесь означает, что мы действительно имеем дело с HTML-документом, а body — это тэг, внутри которого (то есть между его открывающей и закрывающей частью) будет размещено само содержимое страницы.

Опциональные части

 

Тэг html опционально (в смысле — не обязательно) может содержать тэг head, который должен предшествовать тэгу body. Он содержит описание HTML-документа, как такового.

Рассмотрим некоторые тэги, опционально входящие в head.

Тэг title содержит название документа, которое браузеры обычно выводят в заголовке окна. Это не совсем обычный тэг, поскольку браузер не поймет никакие тэги внутри него и воспримет их как текст. То есть title не должен содержать каких-либо тэгов. Зато он может содержать сущности.

Например:

<title>Заголовок моей страницы</title>

Тэг link имеет множество применений. Мы рассмотрим одно — подключение внешних файлов с описанием стилей. Стили позволяют изменять обычные свойства отображения различных тэгов. Подключив файл стилей, ты указываешь браузеру, что при отображении тэгов нужно использовать свойства, заданные стилями, описанными в этом файле. Тэг link может быть использован многократно. Соответственно, к одной странице можно подключить несколько файлов стилей.

Пример подключения файла стилей:

<link href = "some_url" type = "text/css" rel = "stylesheet">

• Свойство href задает URL, указывающий на файл стилей (обычно такие файлы имеют расширение css).
• Свойства type и rel говорят о том, что мы имеем дело с описанием стилей. В частности, type задает MIME-тип файла, к которому ведет ссылка, а rel указывает, чем этот файл является по отношению к нашему документу.

Собирая все вместе, приведу пример простенького HTML-документа:

<html>
<head>
<title>Мой документ</title>
<link href = "mystylesheet.css" type = "text/css" rel = "stylesheet">
</head>
<body>
Тело документа
</body>
</html>

Подробнее об этих, а также о других тэгах, которые могут находиться внутри тэга HEAD ты всегда можешь почитать в справочнике.

Иногда HTML-документ начинается вот такой строкой, расположенной еще до тэга HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Это всего лишь необязательное указание спецификации, которой удовлетворяет документ. В данном примере, это спецификация HTML версии 4.01

Правила хорошего тона (оформление исходника HTML)

 

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

Давай прикинем, как этого избежать.

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

Согласись, открывающийся тэг в таком виде:

<table width = 100% height = 100% border = 0 cellspacing = 0 cellpadding = 0>

Выглядит гораздо лучше, чем, например, в таком:

<table width
= 100% height = 100% border
= 0 cellspacing =
0 cellpadding = 0>

Думаешь, никому в голову не придет писать тэги вот так? Специально — нет. Но во что-то подобное страница запросто превращается после ряда небрежных исправлений, во время которых какие-то свойства удалялись, а какие-то добавлялись.

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

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

<table> </table>

Строчные тэги редко нуждаются в подобном выделении — на то они и строчные, чтобы размещаться целиком в одной строке. Например, разметка данная ниже занимает очень много места и только сбивает с толку — отступами выделена структура там, где ее, как таковой, и нет (меняется лишь начертание текста):

Некоторый текст
<b> </b>
снова обычный текст

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

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

В качестве примера взгляни на таблицу с вложенной таблицей и крупным блоком текста в ней (учти, что в этом примере реальной необходимости в возврате к краю не было — это просто демонстрация такого возврата):

<table>
<!-- здесь я решил, что очередной отступ уведет нас слишком далеко -->

<table>
А здесь имеется очень крупный
блок текста, делать большие
отступы перед каждой строкой
которого я не хотел.

</table>

</table>

Еще могу посоветовать разделять логические блоки HTML-кода (например, параграфы и отдельные разделы) пустыми строками и не забывать о возможности внесения комментариев.

В общем, оформляй свой код так, чтобы тебе было удобно с ним работать и в момент написания, и когда тебе придется его редактировать. Это и есть самое главное правило оформления.

Форматируем

 

Простенько

 

Теперь я покажу несколько примеров использования для наиболее часто встречающихся тэгов. Для каждого тэга мы рассмотрим только некоторые его возможности. За подробностями — как всегда, в справочник.

Сразу предупрежу, примеры могут выглядеть немного по-разному в разных браузерах. Кстати, различия в отображении страниц разными браузерами надо учитывать. Дело в том, что ни один браузер не удовлетворяет стандартам целиком и полностью — у каждого есть свои особенности, а иногда и глюки. Поэтому желательно тестировать свои страницы в нескольких наиболее популярных браузерах. Таковыми на данный момент являются Internet Explorer, Mozilla (или Netscape Navigator — они используют один и тот же код отображения HTML) и Opera.

Текст

 

Тэги, задающие вид текста

дока от W3C

Эти тэги явно указывают, как изменяется вид заключенного в них текста.

B

Жирный шрифт текста.

Пример:

<b>Это жирный текст</b>

Вид на странице:

Это жирный текст

I

Наклонный шрифт текста.

Пример:

<i>Это наклонный текст</i>

Вид на странице:

Это наклонный текст

---

Структурирующие тэги

дока от W3C

Эти тэги указывают, чем является текст, в них заключенный — например, представляет ли он из себя параграф, или выделенный текст. Они могут обозначать и другие элементы структуры, например, наличие перевода строки и тому подобное.

Такие тэги предпочтительнее тэгов, задающих вид текста. Причина тому — возможность использования стилей. Например, тэги I и EM по умолчанию выделяют текст одинаковым образом. Но тэг I явно говорит: текст наклонный, а тэг EM просто говорит о том, что текст как-то выделен. Допустим, ты решил выделять текст не наклоном, а увеличивая его размер. Для этого ты описываешь соответствующий стиль и подключаешь его к своей странице. Если ты использовал выделение текста тэгом EM, то указываешь в стиле, что тэг EM обозначает текст увеличенного размера.

Конечно, то же самое ты можешь сделать и с тэгом I, но тут получится логическое расхождение: Я смотрю на исходник твоей страницы, вижу тэг I. Я знаю, что I — это наклонный текст. Потом я смотрю на страницу в браузере и не вижу никакого наклонного текста, зато вижу текст увеличенного размера. Я в недоумении — текст выглядит не так, как ему предписано тэгом.

В случае EM — все в порядке. Я знаю, что EM — это выделенный текст. Выделенный текст я и вижу. Как именно текст выделен, тэг EM не говорит, и потому в этом случае не сбивает с толку.

EM

Акцентированный текст, то есть текст, как-то выделяющийся среди прочего.

Пример:

обычный текст <em>выделенный текст</em> снова обычный текст

Вид на странице:

обычный текст выделенный текст снова обычный текст

STRONG

Сильно акцентированный текст.

Пример:

обычный текст <strong>выделенный текст</strong> снова обычный текст

Вид на странице:

обычный текст выделенный текст снова обычный текст

P

Параграф. По умолчанию — блок текста, отделенный от прочего текста отступами сверху и снизу.

Является блочным элементом. Не имеет права содержать никакие блочные тэги внутри себя, включая другие тэги P, но может содержать тэги строчные. С помощью свойства align этого тэга можно выравнивать содержащийся в нем текст по левому или правому краю, или по центру. Это же свойство доступно и для многих других блочных тэгов.

Пример:

текст вне параграфа
<p> </p>
снова вне параграфа

Вид на странице:

текст вне параграфа

параграф

снова вне параграфа

Несколько параграфов подряд обычно обозначаются так:

<p> </p>
<p> </p>

Вид на странице:

параграф 1

параграф 2

BLOCKQUOTE

Цитата. Это блочный тэг. Его строчный аналог — Q использовать не рекомендую, поскольку он по-разному отображается разными браузерами и никаким из них не отображается согласно стандарту.

Пример:

Цитата:
<blockquote> </blockquote>

Вид на странице:

Цитата:

BR

Перевод строки. Это непарный тэг.

Пример:

Перевод строки будет здесь:<br>а тут уже новая строка

Вид на странице:

Перевод строки будет здесь:
а тут уже новая строка

NOBR

Запрет переводов строки.

Пример:

<nobr>весь этот текст при отображении на странице останется на одной строке, каким бы длинным он ни был</nobr>

Вид на странице приводить не буду, поскольку отображение этого примера повлияет на всю страницу (она раздуется в ширину и весьма вероятно вылезет за экран). Тэг NOBR обычно применяется к очень коротким участкам текста, если нужна уверенность, что этот текст никогда не будет разорван переводом строки. Например, если нужно, чтобы слово, содержащее дефис, никогда не было разорвано.

H1, H2, H3, H4, H5, H6

дока от W3C

Заголовки разных уровней — от самого крупного до самого мелкого. Не рекомендуется использовать уровни 5 и 6 — в большей части случаев они совершенно не похожи на заголовки, потому что слишком мелкие.

Все заголовочные тэги — блочные.

Пример:

<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>
Обычный текст.

Вид на странице:

Заголовок уровня 1

Заголовок уровня 2

Заголовок уровня 3

Заголовок уровня 4

Заголовок уровня 5

Заголовок уровня 6

Обычный текст.

PRE

Предварительно отформатированный текст. Блочный тэг, для текста находящегося в котором все пробельные символы будут оставлены как есть.

Пример:

<pre>

  Предварительно

     отформатированный

	     текст.

Такого   вот     вида.

</pre>

Вид на странице:

  Предварительно

     отформатированный

	     текст.

Такого   вот     вида.

---

Ссылки

 
дока от W3C

A

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

Свойство href должно содержать URL (интернет-адрес). URL может быть абсолютным, т.е. содержать полный путь к ресурсу, например <a href = "http://someserver.net/someresource">, либо относительным, т.е.содержать путь к ресурсу относительно расположения ресурса, содержащего ссылку с таким URL'ом.

Например, если на странице с полным адресом http://srv.net/dir1/dir1.1/page.html прописана относительная ссылка ../../dir2/page2.html, то ее полный адрес будет http://srv.net/dir2/page2.html.

И если мы переместим нашу страницу с ссылкой так, что ее адрес станет http://srv.net/dir3/dir3.1/dir3.1.1/page.html, то прописанная нами относительная ссылка будет вести уже в другое место, а именно http://srv.net/dir3/dir2/page2.html — это похоже на относительные пути в дереве каталогов файловой системы.

Абсолютные URL'ы могут не включать в себя имя сервера, указывая расположение относительно текущего сервера. Например, если на сервере someserver.net есть страница с абсолютной ссылкой /dir1/dir1.1/page.html, то ее полный адрес, включающий имя сервера будет: http://srv.net/dir1/dir1.1/page.html

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

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

Обычно документом по умолчанию для корневого каталога веб-сервера является index.html. Например, обращение к некоему http://someserver.net на деле зачастую оказывается обращением к http://someserver.net/index.html (хотя и не всегда).

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

Отдельные участки страницы адресуются указанием после имени ресурса символа #, за которым следует имя метки, имеющейся на странице. Например, URL page.html#lbl3 будет вести не просто на страницу page.html, а конкретно на ту ее часть, где стоит метка lbl3.

Сама метка ставится на страницу с помощью того же тэга A — для этого у него должно быть указано свойство name, задающее имя метки. Если имя метки не указать, то получится ссылка на начало страницы, то есть ставить метку в начале страницы не имеет смысла — начало страницы как бы уже помечено меткой без имени. Если URL содержит только символ # и имя метки, это означает переход на данную метку на самой странице с этим URL'ом.

Заметь, что тэг А может одновременно содержать и свойство href, и свойство name — т. е. быть одновременно и ссылкой, и меткой. Если же ты ставишь тэг A лишь для того, чтобы обозначить метку (т.е. не собираешься указывать у него свойство href), то лучше оставлять тэг пустым (например <a name = "lbl"></a>), иначе в некоторых браузерах возможны непонятные визуальные эффекты для текста внутри такого тэга (браузер иногда забывается и начинает отображать текст внутри такого тэга в стиле ссылки, хотя, как я уже сказал, без свойства href тэг А не определяет ссылку).

Теперь — несколько примеров:

<a href = "#" name = "lbl">ссылка на начало страницы, являющаяся меткой с именем lbl</a><br>
<a href = "http://www.w3c.org/">организация, занимающаяся интернет-стандартами</a><br>
<a href = "#lbl">ссылка на метку lbl текущей страницы</a><br>
<a href = "/techinfo/index.shtml#actors">ссылка на метку actors страницы index.shtml в каталоге techinfo текущего сервера</a>

Вид на странице:

ссылка на начало страницы, являющаяся меткой с именем lbl
организация, занимающаяся интернет-стандартами
ссылка на метку lbl текущей страницы
ссылка на метку actors страницы index.shtml в каталоге techinfo текущего сервера

---

КАРТИНКИ

 
дока от W3C

IMG

Картинка описывается на странице непарным тэгом IMG. Свойство src задает URL файла картинки, а свойство alt — текст, который выведется вместо картинки в случае, если картинка по каким-то причинам выведена не будет (например, ресурс недоступен или в браузере отключен показ картинок).

Картинки в Интернет принято хранить не в каком попало формате, а в форматах gif или png, если картинка небольшая, с небольшим количеством цветов (пиктограмки, баннеры, логотипы) и в формате jpeg, если картинка большая и полноцветная (фотографии и тому подобное).

IMG является строчным элементом, но использовать сколько-нибудь большие картинки внутри текстовой строки некрасиво, т. к. высота строки становится равна высоте картинки — браузеры не делают обтекание текстом. Поэтому большие картинки обычно выводят либо окружая их переводами строки, либо помещая внутрь какого-нибудь блочного тэга. Зачастую удобно задать расположение картинки, используя таблицы. Картинка может быть выровнена относительно текста в строке по вертикали (свойство align).

Если картинка является ссылкой, дополнительный смысл приобретает свойство border тэга IMG. Цвет рамки вокруг картинки будет таким же, как цвет текста внутри тэга A. Если тебя не устраивает появление рамки «ссылочного» цвета — ставь ей нулевую толщину (по умолчанию для картинки-ссылки она ненулевая).

Некоторые используют свойство alt для задания всплывающей подсказки для картинки (текст, появляющийся поверх объекта при наведении на него мыши). Но это неправильный подход, поскольку он не является частью стандарта и такой прием будет работать только в Internet Explorer. Правильный способ описать всплывающую подсказку — свойство title. Кстати, свойство title можно указывать не только для тэга IMG, но и для многих других тэгов.

Пример:
(серый фон дан, чтобы была видна область, занимаемая картинками)

<p style = "background-color: lightgrey">
картинка <img src = "/i/doc.gif" alt = "документ" title = "документ"> с указанным альтернативным текстом и заданной всплывающей подсказкой<br>
текст и картинка <img src = "/i/logo_main.gif" title = "НадПроф"> среди этого текста (обрати внимание на отсутствие обтекания картинки текстом)
</p>

Вид на странице:

картинка с указанным альтернативным текстом и заданной всплывающей подсказкой
текст и картинка среди этого текста (обрати внимание на отсутствие обтекания картинки текстом)

---

Списки

 
дока от W3C

UL

Список элементов. Это блочный тэг. Элементы списка отмечаются непарным тэгом LI.

Пример:

<ul> </ul>

Вид на странице:

• Элемент 1
• Элемент 2
• Элемент 3

Может включать подсписки:

<ul> </ul>

Вид на странице:
(обрати внимание, как меняется оформление для списков разного уровня вложенности)

• Элемент 1
  • Элемент 1.1
  • Элемент 1.2
    • Элемент 1.2.1
    • Элемент 1.2.2
    • Элемент 1.2.3
  • Элемент 1.3
• Элемент 2
• Элемент 3

OL

Тоже список, но немного по-другому оформляемый. Рядом с его элементами отображаются их порядковые номера. Можно задавать разные стили отображения этих номеров с помощью свойства type. Элементы, как и для UL, отмечаются тэгом LI.

Пример:

<ol> </ol>

Вид на странице:

1. Элемент 1
2. Элемент 2
3. Элемент 3

Тоже может включать подсписки. Более того, UL может включать в качестве подсписка OL и наоборот.

---

Таблицы

 
дока от W3C

TABLE

Тебе стоит внимательно изучить документацию на тэг TABLE, поскольку практически любое нелинейное (более чем в одну колонку) расположение элементов страницы достигается при помощи таблиц. Здесь я приведу лишь несколько примеров, иллюстрирующих возможности таблиц.

Внутри тэга TABLE обычно используются тэги:

• TR — строка таблицы
• TD — ячейка таблицы
• TH — заголовочная ячейка таблицы (отличается от TD лишь стилем вывода)

Основные свойства, которые тебе понадобятся — width и height — могут задавать размеры таблицы и ячеек.

Свойство border задает ширину рамки. По умолчанию рамка дается нулевой ширины, т.е. отсутствует. Таблицы являются «резиновыми» — они растягиваются по мере необходимости под размеры элементов, вложенных в ячейки.

Простейшая таблица без рамки:

<table> </table>

Вид на странице:

-1:1-	-1:2-	-1:3-
-2:1-	-2:2-	-2:3-

Простейшая таблица с рамкой:

<table border = 1> </table>

Вид на странице:

1:1	1:2	1:3
2:1	2:2	2:3

Еще таблица с рамкой:
(Обрати внимание: если ячейка абсолютно пуста, у нее нет рамки. Чтобы рамка была, ячейка должна иметь внутри хотя бы &nbsp;)

<table border = 1 width = 100%> </table>

Вид на странице:

Далее идут пустая ячейка и ячейка с  

Таблица с ячейкой, перекрывающей несколько колонок:
(обрати внимание на свойство colspan)

<table border = 1> </table>

Вид на странице:

1:1	1:2	1:3	1:4
2:1	2:2, 2:3		2:4
3:1	3:2	3:3	3:4

Таблица с ячейкой, перекрывающей несколько строк:
(обрати внимание на свойство rowspan)

<table border = 1> </table>

Вид на странице:

1:1	1:2	1:3
2:1	2:2, 3:2	2:3
3:1		3:3

Таблица с ячейкой, перекрывающей несколько колонок и строк:

<table border = 1> </table>

Вид на странице:

1:1	1:2	1:3	1:4
2:1	2:2, 2:3, 3:2, 3:3		2:4
3:1			3:4

Имей в виду, что свойство colspan в некоторых сложных случаях может поставить браузер в тупик при определении требуемых размеров ячеек таблицы — в таких случаях эти размеры могут выглядеть как минимум странно. Я не буду рассказывать о приемах борьбы с подобными явлениями, так как они все относятся к категории шаманства и не дают гарантированных результатов.

Прочее

 

HR

дока от W3C

Разделяющая горизонтальная линия. Непарный блочный тэг.

Пример:

Текст до линии
<hr>
и после линии

Вид на странице:

Текст до линии

---

и после линии

SPAN

дока от W3C

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

DIV

дока от W3C

Блочный элемент-конструктор. Во всем подобен тэгу SPAN, но является блочным. Интересно, что с помощью стилей DIV можно превратить в том числе и в SPAN и наоборот.

BODY

дока от W3C

Про BODY мы уже говорили. У этого тэга есть свой набор свойств, про который стоит почитать в справочнике. Но, вообще говоря, эффекты, достигаемые этими свойствами, лучше получать с помощью стилей.

Со вкусом (немного о стилях)

 
дока от W3C

Свойство style

 

Любой HTML-элемент может иметь свойство style, содержащее набор свойств, описывающих его отображение. Указывая это свойство при описании тэга, можно изменять свойства его отображения. Для разных тэгов доступны разные свойства отображения, но некий базовый набор есть у всех. Каждый тэг имеет свой умолчательный набор стилевых свойств, который и определяет его вид в окне браузера, если эти стили намеренно не перекрыты. Когда ты задаешь тэгу свойство style, ты перекрываешь те стилевые свойства, которые прописал в style. Остальные свойства остаются такими, как они заданны по умолчанию.

Спецификация не указывает явно, какие стилевые свойства имеют разные элементы по умолчанию, но есть рекомендация от W3C, предлагающая один из вариантов, на который можно опереться. Сразу предупрежу, что поведение браузеров далеко не во всем совпадает с этой рекомендацией. Но если возникает спорная ситуация (например, разные браузеры полагают разные умолчальные свойства и это не дает сделать одинаково выглядящую в них страницу) — лучше приводить стили к тому виду, что указан в рекомендации.

Пример использования стилей:
(берем тэг B и делаем его отображение эквивалентным отображению тэга I)

<b style = "font-weight:normal; font-style:italic">текст внутри тэга B</b><br>
<i>текст внутри тэга I для сравнения</i>

Вид на странице:

текст внутри тэга B
текст внутри тэга I для сравнения

Мы указали два стилевых свойства:

• font-weight:normal — нормальный «вес» шрифта (у B по умолчанию не normal, а bold)
• font-style:italic — наклонный стиль шрифта (у B по умолчанию не italic, а normal)

В результате были получены свойства, соответствующие умолчательным свойствам тэга I.

Как ты заметил, стиль задается в виде списка пар property_name:property_value, разделенных точкой с запятой.

Здесь property_name — имя стилевого свойства, а property_value — его значение.

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

Например:

<span style = "border: 1px inset red">стилевое свойство border имеет значение "1px inset red"</strong>.

Обрати внимание на явное указание единицы измерения px у ширины рамки. Здесь оно в общем-то не требовалось, но некоторые браузеры (например Netscape) не воспринимают стилевое свойство border, если не указать единицу измерения явно — это как раз пример глюка, демонстрирующий необходимость сверять вид своих страниц в разных браузерах.

Учти, что между числом и единицей измерения не должно быть пробельных символов — причем это касается как стилевых свойств, так и обычных атрибутов тэгов — так положено согласно стандарту.

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

Вот пример:

text, <span style = "font-size: larger"> larger text, <span style = "font-size: larger">twice larger text</strong></strong>

Вид на странице:
(обрати внимание, как относительные значения свойств реагируют на контекст)

text, larger text, twice larger text

Некоторые относительные значения большинство браузеров не в состоянии отобразить правильно. Например, свойство font-weight:bolder (более жирный шрифт) не дает ничего нового для вложенных тэгов в большинстве браузеров — они просто не в состоянии отобразить шрифт жирнее жирного. Если твой браузер в состоянии — попробуй увеличить вложенность. За некоторым порогом браузер уже не сможет сделать «еще жирнее».

Вот демонстрирующий это пример:

text, <span style = "font-weight: bolder">bolder text, <span style = "font-weight: bolder">twice bolder text</span></span><br>
<b>bold text, <span style = "font-weight: bolder">bolder text inside B</strong></b>

Вид на странице:

text, bolder text, twice bolder text
bold text, bolder text inside B

Среди стилевых свойств наиболее полезны следующие:

• background — свойства фона
• border — свойства рамки
• font — свойства шрифта
• padding — свойства отступа внутри тэга
• margin — свойства отступа вне тэга
• Вышеперечисленные стилевые свойства являются целыми наборами, но можно обращаться и к отдельным подсвойствам набора, например, border-bottom-style, или font-weight.
• width — ширина
• height — высота
• color — цвет
• display — режим отображения (блочный, строчный, неотображаемый)
• text-align — выравнивание (только для блочных элементов)

Тэг STYLE

 

Тэг STYLE может присутствовать внутри тэга HEAD. Внутри тэга STYLE можно переопределять умолчальные стилевые значения для различных тэгов.

Выглядит это, например, так:

<style>
/* Переназначаем стиль для тэга B */
B { /* превращение B в I  */ }
</style>

Здесь, то что между символами /* и */ — комментарии. Их, конечно же, можно было и не писать.

B — имя тэга, для которого задается стиль. В фигурные скобки взято само описание стиля. Как всегда, все может быть разделено любым количеством пробельных символов и нечувствительно к регистру.

Так можно переопределить стили для любого тэга. Или даже описать свой собственный тэг, которого нет в HTML.

Например:

<style>
LARGER { font-size: larger }
</style>

После такого объявления можно использовать данный тэг для описания текста увеличенного размера:

обычный текст, <larger>крупнее, <larger>еще крупнее</larger></larger>

Но лучше не увлекаться собственными тэгами, чтобы люди потом не ломали голову над твоими HTML-страницами. Кроме того, есть ведь вероятность, что в очередной версии стандарта HTML появится новый тэг, имя которого ты использовал на своей странице, вводя собственные тэги. Тогда путаница будет еще большей. Тут, правда, есть выход — пространства имен XML (XML namespaces). Но о них, если интересно, читай самостоятельно.

Свойство class

 

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

Например, если стили описаны так:

<style>
.bold { font-weight: bold }
DIV.italic { /* этот класс действенен только для тэгов DIV */

}
</style>

То вот такой код:

<span class = "bold">bold text</span><br>
<span class = "italic">обычный текст — класс italic определен только для тэгов DIV</span>
<div class = "italic">italic text</div>
<div class = "bold">bold text (класс bold определен для любого тэга)</div>

Будет выглядеть так:

bold text
обычный текст — класс italic определен только для тэгов DIV
italic text
bold text (класс bold определен для любого тэга)

Имя класса при описании стилей внутри тэга STYLE, как ты заметил, всегда начинается с точки, а при указании в свойстве class — обходится без нее.

Пример также демонстрирует, как классы можно привязывать к конкретным тэгам (обрати внимание, класс italic не оказывает влияния на тэг SPAN — он привязан к тэгу DIV).

Контекстные стили и назначение стиля нескольким элементам

 

Это проще всего показать на примерах:

<style>
DIV, SPAN, TD, .italic { /* стиль тэгов DIV, SPAN, TD и тэгов с классом italic */ }
DIV.bold, SPAN { /* стиль тэгов DIV с классом bold и для тэгов SPAN */ }
DIV SPAN { /* стиль тэгов SPAN, вложенных в тэг DIV */ }
TD DIV.bold SPAN, STRONG { /* стиль тэгов SPAN, вложенных в тэг DIV с классом bold, если этот DIV сам вложен в TD и любых тэгов STRONG */ }
</style>

Как видишь, можно задавать стиль сразу нескольким тэгам, классам и т.д.

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

<div><span>некий текст</span></div>
<div>DIV может содержать и другие элементы, стиль все равно будет применен только к вложенному SPAN: <span>некий текст</span></div>

Но она же совершенно не будет влиять на тэги SPAN не вложенные непосредственно в DIV. Например, она не окажет влияния ни в одном из следующих примеров:

<span>некий текст</span>
<span><span>некий текст</span></span>
<div><b><span>некий текст</span></b></div>

Последняя строка в примере описания стилей задает более сложный контекст для тэга SPAN (для тэга STRONG контекст не задан), но суть та же.

Файлы стилей

 

Файл стилей — это файл, содержащий описание стилей. Обычно он имеет расширение css. Когда мы рассматривали тэг LINK, ты научился подключать такие файлы к своим HTML-страницам. Хранить стили в отдельных файлах очень удобно — ведь в этом случае для того, чтобы изменить стиль какого-либо тэга на множестве страниц, нужно будет внести необходимые изменения всего лишь в одном месте.

Файл стилей представляет собой обычный текстовый файл, содержащий описания стилей точно в таком же виде, как мы их писали внутри тэга STYLE (самого тэга там, конечно, быть не должно).

Каскадность стилей

 

Подключая к странице CSS-файлы, прописывая на ней стили в тэге STYLE и прописывая свойство style у тэгов можно многократно переопределять стили.

Если на каком-то этапе встретилось стилевое свойство, описание которого уже было — будет использовано последнее найденное описание. Например, если у нас есть тэг STYLE:

<style>
SPAN { font-weight: bold; }
</style>

И тэг SPAN:

<span style = "font-weight: normal">обычный текст</strong>

То содержимое тэга SPAN будет иметь стилевое свойство font-weight:normal.

Свойства, являющиеся наборами, применяются так, как если бы каждое свойство набора было применено в отдельности.

Например если:

<style>
SPAN { border: 1px solid }
</style>

и

<span style = "border-bottom-style:none">текст в рамке без нижней части</strong>

То результирующий стиль будет эквивалентен стилю "border-top: 1px solid; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px none".

Вот и все. :)))

Пора практиковаться. Хотя я надеюсь, ты уже начал это делать. ;)

 

dim