Учебник: Html и Самиздат

[к оглавлению]

Комментарии

Да, вот еще что – HTML дает возможность вставить в код комментарии. Они могут находиться в любом месте документа и браузером, естественно, не отображаются. Синтаксис:

<! — Комментарий — >

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

Единственно возможное их применение – во время отладки убрать часть кода, закомментировав ее. Теперь вернемся к нашим баранам, то бишь тэгам.

[к оглавлению]

<br>, переносим строки

Возьмите какой-нибудь текстовый файл, измените расширение на .htm, откройте в браузере. Плохо, да? Весь текст написан слитно. Где мои любимые абзацы?!

Решением проблемы станет тэг <br>. Он осуществляет перевод строки. Пример кода:

Первая строка <br> Вторая строка <br> Третья строка

Браузер покажет:

Первая строка

Вторая строка

Третья строка

Как вы заметили, завершающего тэга не требуется. У тэга <br> есть параметр clear, но нам он пока не нужен.

Можно еще воспользоваться тэгом абзаца <p> ... </p>, но лучше не стоит. Сейчас увидите почему. Пример кода:

<p> Первая строка <p> Вторая строка <p> Третья строка

Здесь не проставлен парный тэг </p> – он просто-напросто игнорируется браузером, можете его не писать. Браузер покажет:

Первая строка

Вторая строка

Третья строка

Нормально? Мне кажется, нет. Откройте любую книжку, посмотрите, есть между абзацами отступ? Правда, можно добиться "адекватного поведения" от тэга <p>, используя стили (CSS), но нам это не светит. По крайней мере, здесь, на Самиздате, будете делать свой сайт – тогда пожалуйста. Между прочим, на Западе абзацы как раз отделяют друг от друга пустыми строками – для них это "нормально". Для нас – нет, мы пользуемся красной строкой.

Действие тэга <p> простирается до следующего текстового блока (<br>, <hr>, <p>, <div>, <blockquote>, <ul>, <ol> и др.).

С помощью <p> можно делать отступ между главками в тексте. Один <p> равносилен <br><br>. Однако учтите, два <p> или десять, или сто отображаются браузером как один (завершающий тэг </p> значения не имеет). Поэтому, если нужен большой отступ, пользуемся многократным <br>.

[к оглавлению]

Проблема красной строки

Теперь снова откроем книжку и внимательно посмотрим. Ага, все абзацы начинаются с красной строки. Как это сделать? К сожалению, у "буржуев" красной строки нет, и в HTML ничего такого не предусмотрено, поэтому браузер использует не красную, а пустую строку для отделения абзацев друг от друга или от прочих элементов. Что ж, будем выкручиваться. (Между прочим, в CSS такой проблемы не существует, а отступ красной строки может быть даже минусовым, то есть превратиться в выступ.)

Лично меня устраивает такой вариант: <br><dd>. Эта связка будет работать только в браузерах IE и Mozilla (и им подобных), а в Opera и Google Chrome не будет! Заметим, что тэг <dd> использован не по назначению (т.к. используется он в списке определений, вот тогда-то Opera его "понимает"), ну и что? – главное результат.

Есть и другие решения:

вставить несколько неразрывных пробелов (&nbsp;&nbsp;&nbsp;&nbsp;)

вставить слово с цветом букв под цвет фона (но лучше так не делать)

вставить прозрачный рисунок в формате gif Каждый делает на свой лад. Смотрим пример кода красной строки:

<dd> В предпоследний день одолевает хандра. Наваливается черной тучей, опрокидывает на обе лопатки. Засасывает в пучину бездействия. <br><dd> Я даже пропускаю приход Сэма. <br><dd> Случайно замечаю, глянув в окно. Мне плохо. Тебе тоже?

Что покажет браузер:

В предпоследний день одолевает хандра. Наваливается черной тучей, опрокидывает на обе лопатки. Засасывает в пучину бездействия.

Я даже пропускаю приход Сэма.

Случайно замечаю, глянув в окно. Мне плохо. Тебе тоже?

Мы воспользовались тэгом <dd> как табулятором, и с красной строкой все в порядке. Напоминаю, что это работает для браузеров IE, Mozilla и им подобных.

Почему на первой строчке нет <br>, а только <dd>? А зачем нам дополнительная пустая строка перед текстом? Если написать:

<dd><dd><dd> Мой дядя самых честных правил

То получится многократное смещение:

Мой дядя самых честных правил

Кстати, можно и не писать <br><dd>, без <br> тоже работает. Но я пишу, на всякий случай.

Повторяю еще раз: в браузерах Opera и Google Chrome тэг <dd> (если он использован не по назначению, т.е. не в списке определений) работать не будет!

Также замечу, что интерфейс СИ при переводе doc в html формирует красную строку из тэга <dd> и двух неразрывных пробелов (&#160;). Т.о. пользователи Opera видят ма-аленькую красную строку, а пользователи IE и Mozilla довольно большую. Я не добавляю неразрывные пробелы, т.к. это увеличивает размер текста. И еще потому, что я не принадлежу к поклонникам Opera. Не нравится она мне. Но если вы будете делать собственный сайт, позаботьтесь о том, чтобы страница выглядела одинаково при просмотре в разных браузерах.

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

Для тех, кто в танке: хоть сто, хоть миллион пробелов, идущих подряд, браузер отобразит как один. Идущие подряд пустые строки браузер отобразит как один пробел.

[к оглавлению]

Выделяем слова – <b>, <i>, <u>, <s>, <tt>, <sup>, <sub>

Идем дальше. Научимся выделять слова.

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

текст жирный

<i>текст курсивный</i>

текст курсивный

<u>текст подчеркнутый</u>

текст подчеркнутый

<s>текст перечеркнутый</s>

текст перечеркнутый

<tt>текст моноширинный</tt>

текст моноширинный

^{верхний индекс}

верхний индекс

_{нижний индекс}

нижний индекс

А если мы хотим жирный курсивный подчеркнутый текст? Пожалуйста:

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

Теги могут и пересекаться. Вот так:

<b> жирный <i>курсивный</i> <u><i>и еще</i> подчеркнутый</u></b>

жирный курсивный и еще подчеркнутый

При этом необходимо следить за вложенностью тэгов. Например, 6-й интернет-эксплорер скушает такую конструкцию:

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

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

Есть и другие тэги для выделения логического, то бишь смыслового, а мы использовали физическое. Но результат от их применения будет аналогичен вышеупомянутым тэгам или их сочетаниям. Поэтому рассматривать их мы не будем. Зачем нужна лишняя информация?

Особенность еще в том, что разные браузеры могут несколько по разному отображать логическое выделение. А я люблю ясность! Раз нужен курсив, значит, курсив, а не черт знает что. Поэтому лично я пользуюсь только физическим выделением.

Кстати, с помощью CSS можно вообще переопределить поведение тэгов. Скажем, пишем в коде: <i>однажды в студеную зимнюю пору</i>. Текст должен быть курсивным, а он, по нашему желанию может стать жирным!

[к оглавлению]

<hr>, горизонтальная линия

Рассмотрим еще один тэг, не требующий пары, – <hr>. Что он делает? Отчеркивает горизонтальную линию. У него есть такие параметры:

align – выравнивание, может принимать значения left, right и center. По умолчанию center.

width – ширина линии, может задаваться в % (относительная величина) и в пикселях (абсолютная величина). По умолчанию 100%.

size – толщина линии, задается в пикселях. По умолчанию 2 пикселя (для IE).

noshade – отмена объемности (без значений). По умолчанию линия объемна.

color – цвет линии, работает только в интернет-эксплорере (если задан цвет, то автоматически пропадает объемность). По умолчанию цвет такой же, как и цвет фона, рамка вокруг линии серая. Таким образом, написав <hr> без параметров, мы получим объемную линию шириной во все окно браузера, выровненную по центру, с толщиной в 2 пикселя.

Кстати, линия всегда выводится с новой строки. Если вслед за тэгом <hr> идет какой-либо текст, он тоже выводится с новой строки.

Вот несколько линий:

<hr size="10" width="50%" color="#FF0000">

<hr color="#02CA2A">

<hr align="left" size="5" width="150">

<hr align="right" size="5" width="80%" noshade>

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

[к оглавлению]

<font>, шрифт, и как с ним бороться

Плавно переходим к тегу <font>, который позволит нам по всякому издеваться над шрифтом. Да, вот что – без параметров этот тэг абсолютно ничего не делает. А параметры такие:

face – гарнитура (вид) шрифта (Arial, Courier, Garamond и др.).

size – размер шрифта.

color – цвет шрифта. Параметр face, при заливке текста на Самиздат ведет себя довольно странно – может сработать, а может быть удален. Вообще.

В чем же дело? Произведя несложные опыты (кстати, благодарю за помощь Антона Столета), я установил, что СИ принимает изменение шрифта, если его название записано без кавычек.

Повторю еще раз: не нужно брать название шрифта в кавычки. Ну а если возьмете, то параметр face будет выкинут.

Но – таким образом вы никогда не сможете прописать, скажем, Book Antiqua, потому что в названии присутствует пробел, и кавычки обязательны. Да что там – даже Times New Roman не сможете, хотя, в принципе, он используется по умолчанию. И поэтому браузер при ошибочном значении параметра face все равно отобразит текст именно им. Во как.

Какие же шрифты допустимы на Самиздате? На основе проделанных опытов, привожу следующий список (конечно, он далеко не полный). В общем, пробуйте, думаю, любой шрифт с названием не более чем из одного слова подойдет.

Arial

Tahoma

Courier

Verdana

Impact

Univers

Georgia

Coronet

Symbol (Symbol, всякие греческие буквы и т.п.)

Garamond

Гарнитура – это набор начертаний символов одного шрифта. Может включать в себя прямое и курсивное начертание, либо только прямое или курсивное. Может отличаться по жирности букв, их ширине и кеглю (размеру).

Итак, задаем гарнитуру шрифта:

<font fасе="Arial"> текст </font>

Теперь браузер выведет наш текст шрифтом Arial.

Внимание! Во всех примерах, где дан параметр fасе="...", само это слово написано как смесь латинских и русских букв, иначе СИ удалил бы его из текста статьи. И если вы скопируете этот код в html-документ непосредственно из окна браузера, то, конечно же, работать эта конструкция не будет. Все остальные примеры даны правильно.

Можно определить не один вид шрифта, а несколько:

<font fасе="Arial, Helvetica, sans-serif"> текст </font>

Зачем? Если браузер не найдет на машине пользователя первый из указанных шрифтов, то будет искать второй, затем – третий. В случае неудачи будет использован шрифт по умолчанию – Times New Roman (если только пользователь эти умолчания не изменил!). Шрифты в примере заданы не абы как. Они похожи. Третьим вообще указан не шрифт, а родовой признак – sans-serif (рубленый шрифт). Существует еще два родовых признака: serif (шрифт с засечками) и monospace (моноширинный). Указывая родовой признак, можно быть уверенным, браузер что-нибудь да найдет взамен отсутствующего шрифта.

Однако может случиться такая неприятность – вы задали какой-то шрифт, и у пользователя он тоже есть, но нет никакой гарантии, что шрифт содержит в своем наборе русские буквы. У вас-то, все хорошо, а у кого-то – кракозябры. Причем, название шрифта одинаково.

Шрифты с засечками (серифные) – Times New Roman, Garamond, Georgia и др. используются обычно в основном тексте. Эти засечки-завитушки как бы связывают слова, помогая читать текст.

Рубленые шрифты – Arial, Tahoma, Verdana и др. имеют ровные края букв, их, как правило, употребляют для заголовков, сносок, подписей под таблицами и рисунками.

Моноширинные шрифты – Courier, CourierThai и др. имитируют литеры печатных машинок и матричных принтеров. Ширина букв в моноширинных шрифтах всегда одинакова, тем они и отличаются от пропорциональных шрифтов, где каждая буква занимает столько места, сколько ей требуется.

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

Размер шрифта задается так:

<font size="2"> текст </font>

текст

или вот так:

<font size="+2"> текст </font>

текст

<font size="-2"> текст </font>

текст

Разница существенная.

В первом случае мы жестко задали этот самый размер. Кстати, возможные значения – от 1 до 7. Больше цифра – больше размер. Неверные значения (не являющиеся числом) браузер проигнорирует, и шрифт у нас будет стандартного размера, который равен 3. Если мы напишем size="20", то браузер покажет этот текст так, будто size="7", ну и, соответственно, size="-15" превратится в size="1".