Шаг 7 - Оформление документа (продолжение)

Оформлять документ мы начали учиться еще в прошлом шаге, но то что там описано еще далеко не все, хотя и основное, что предоставляет язык html.

Давайте продолжим !!!

Элемент <big>...</big> и <small>...</small>

Чтобы не пользоваться длинными тегами типа <font size=+1>...</font>, предусмотрен тег <big>, который увеличивает размер текста на единицу. Аналогично <small> уменьшает текст на единицу относительно текущего размера. Они очень удобны.

Элемент <sub>...</sub> и <sup>...</sup>

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

Пример

 C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9
А вот как все это выглядит :

C2H5OH или 32=9

Классно правда ??? (только первым не злоупотребляйте :-)

Элемент <b>...</b> и <strong>...</strong>

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

В - сокращение от bold, отображается попросту жирным шрифтом.

Пример:

 <p>А это <b>жирный шрифт</b>
Аналогично strong, вроде бы от слова "сильный", и как спрашивается нам "усилить" текст ??? Ответ: выделить жирным :-).

Так что результат этих тегов будет одним и тем же. Но вот только всеми "любимый" Front Page почему то предпочитает второй вариант - <strong>, тем самым увеличивая размер вашей странички и моей ненависти.

Рекомендация одна: забудьте про <strong> !!!

Элемент <i>...</i> и <em>...</em>

Ну тут аналогично, как и в предыдущем случае. Оба они, как правило выполняют одну и ту же функцию, отображают текст наклонным. I - от слова Italic (наклонный шрифт).
 <p>А это <i>наклонный шрифт</i> и <b><em>жирный наклонный</em></b>
А вот как все это выглядит :

А это наклонный шрифт и жирный наклонный

Вы не поверите, но Front Page и тут предпочитает рассыпать ровным толстым слоем <em> (специально проверил :-).

Элемент <u>...</u>

Ну хоть тут нет второго лишнего (хотя лишний третий :-). Буквочка U от слова Underlined, т.е. как вы наверно догадались это попросту подчеркивание. Ну и пример (как же без него то :-)
 <p><u>Подчеркнуть</u> - ничего проще !!!
Ну демонстрировать не буду, место жалко :-), а лучше скажу, что старайтесь его избегать, т.к. ссылки в документах тоже подчеркиваются, и скорее всего посетители вашего сайта будут путаться, и ломать кнопки мышке :-).

Элемент <s>...</s> и <strike>...</strike>

Опять двойной :-). Отображает зачеркнутым шрифтом. Зачем нужен не понимаю. А вы интересно будуте текст черкать ? :-). Кстати и тут Front Page дал, такого элемента вы там и не найдете :-), да и ненужен он вовсе, по причине (см. выше на строку).

Элемент <tt>...</tt>

Это имитация телетайпного текста, т.е. текста с постоянной шириной символа.

Пример:

<p>Текст из <tt>ТЕЛЕТАЙПА</tt>
Никогда им не пользовался, но может пригодится.

Элемент <pre>...</pre>

Вот этот элемент очень хороший, во-первых отображается с постоянной шириной символа, во-вторых не пропускает пробелы, табуляции и переносы строк, тем самым оставляя первоначальное состояние текста, т.е. предварительно отформатированный текст. Пример:
 <pre>
  1      2      3       4       5
  это  будет  классно  выглядеть
 </pre>
А вот как это смотрится:

  1      2      3       4       5
  это  будет  классно  выглядеть

Этим элементом переполнена эта страница, т.к. все примеры я делаю с помощью него. В принципе я бы отнес к минусам постоянную ширину символа, но вроде как пока никто особо не жаловался. Не нравится используй другое !!! Внутри него почему-то не рекомендуют использовать IMG, BIG, SMALL, SUB, SUP и FONT, но помоему это бред полный !!!

Элемент <div>...</div> и <center>...</center>

Элемент <div> создает новый раздел в документе. Чаще всего служит просто для задания выравнивания текста из больших кусков. Для этого используется атрибут align, который как раз и задает выравнивание внутри раздела.

Пример:

 <div align=right>
  <p>Абзац справа 1
  <p>Абзац справа 2
  <p>Абзац справа 3
 </div>
Если не было бы этого элемента, то вам скорее всего бы пришлось писать в каждом абзаце <p align=right>....., что естественно нудно и большевато. Как ни странно Front Page именно так и делает :-).

Для простоты был введен элемент <center>, который полностью анологичен <div align=center>, только короче :-) !!! Непонятно почему же тогда нет элемента <right> ??? Интересно !!!

Элемент <blockquote>...</blockquote>

Используется для приведения цитат, и выделяется увеличенным отступом с двух сторон.

Пример:

 <blockquote>
     А вот цитаты то побольше я и не нашел :(
 </blockquote>
Я его изредка использую для получения отступов по краям, чтобы текст не сливался с рамкой окна браузера, а так вообще он больше для цитат подходит.

Элемент <hr>

Этот элемент вычерчивает горизонтальные линии. Имеет следующие параметры:
align
Определяет выравливание линии в документе. Значения как обычно. По умолчанию линия отображается шириной во все страницу, и поэтому ее выравнивание не будет заметно.
noshade
Этот атрибут используется для вывода линии в виде полосы одного цвета. По умолчанию она отображается в виде канавки.
size
Устанавливает высоту линии в пикселах.
width
Устанавливает ширину линии в пикселах или в процентах от ширины внешнего элемента.
  <hr width=80% align=left>
  <hr width=50% align=center size=10>
  <hr width=150 align=right noshade>
Вот как выглядит:


Элемент <br> и <nobr>...<nobr>

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

Элемент <br> - от break line служит неким переносом строки в языке Html, и помогает начать новую строку не прибегая к <p>, который дает большой отступ от предыдущей строки.

Пример:

<p>Пораз-<br>рываем стро-<br>ку.
Вот как выглядит:

Пораз-
рываем стро-
ку.

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


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.