Дом Гнома

В гости к Гному - www.ugnoma.NET...
Как это нет??? У Гнома всё есть!!!

Форматирование текста

 

простые буквы из себя мало что представляют. но если их расположить в определённом порядке, они превратятся в облака, хлеб, любовь, лёд, красивого человека - в мысли и образы. А если их ещё и красиво написать.......
ваш покорный слуга
Примеры форматирования текстаДанные текстового формата по прежнему являются доминирующими в HTML документах (если конечно ваш сайт не относится к категории "ХэХэХэ" или целиком посвящён рисованию). Думаю, вы уже разобрались, как приклепать простой текст на страничку, теперь посмотрим, как из него сделать удобоваримое по смыслу и виду произведение. Ведь, если текст не форматировать, на экране он выводится простой сплошной строкой. Для форматирования текстовых данных в HTML применяются следующие теги:

 

Теги управления абзацами

<.P ALIGN=CENTER/LEFT/RIGHT >...<./P> - тег нового абзаца, используется в формате одиночного тега или контейнера. При использовании в форме одиночного тега концом абзаца считается начало следующего т.е следующий тег <.P>. Атрибут ALIGN задает выравнивание элементов абзаца, значение по умолчанию LEFT (не забываем о точках в листингах!)

...

или

Этот абзац выравнивается по левому краю.

И это предложение тоже.

Этот абзац выравнивается по центру.

И это предложение тоже.

Этот абзац выравнивается по правому краю.

И это предложение тоже.

 

Теги управления переносом

<.BR>,<.NOBR>...<./NOBR>, <.WBR> - теги управления разрывами и переносом строк в тексте документа. При разрыве строки межстрочный интервал не увеличивается.


Используется для указания места принудительного разрыва.

Пример:

ФИО:
Дунчиль Г.Ш.

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

ФИО:
Дунчиль Г.Ш.

... Используется для запрета разрыва текста, помещенного в данный контейнер.

Пример: Это предложение лучше не разрывать при необходимости переноситься на новую строку целиком, а не так:

Это предложение лучше
не разрывать

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

Пример: 00509600510186211 - номер счета заданный таким образом при помещении в поле уже своей ширины, разорвется после балансового счета:

00509
605101862111

 

Теги выделения структуры документа

<.H1>...<./H1>, ... ,<.H6>...<./H6> - контейнерные теги шестиуровневых заголовков документа. Имеют атрибут ALIGN ( по умолчанию LEFT) для выравнивания заголовка.

...

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

...

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

...

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

...

Заголовок 4 уровня по левому краю

...
Заголовок 5 уровня по центру
...
Заголовок 6 уровня по правому краю

 

Теги смыслового выделения текста.

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

... Компьютерный код - Function Sum(a,b);
... Выделение цитат - Цитата
... Клавиатурный шрифт - Клавиатура
... Выделение примеров -Пример
... Выделение важных фрагментов - Важно
... Выделение имен (i, j, k ) переменных
... Выделение определений - Определение
... Расставить акценты - Акцент
...
Выделение фрагмента текста в большом блоке текстовом блоке на странице.
Вот фрагмент который мы хотели выделить из текстового блока в документе.
Таким образом выделенные фрагменты текста отображаются броузером.

 

Теги стилистического выделения текста

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

... Выделение полужирным шрифтом
... Выделение курсивом
... Выделение телетайпным шрифтом
... Выделение подчеркиванием
... Выделение перечеркиванием
... Шрифт в верхнем индексе (например возведение в степень) - (a+b) 2
... Шрифт в нижнем индексе - H2O
... Мелкий шрифт
... Крупный шрифт

 

Дополнительные теги форматирования

...
- контейнер предварительного форматирования текста. Используется для размещения на веб-страницах предварительно отформатированных текстовых фрагментов с сохранением их формата. Содержимое контейнера выводится моноширинным шрифтом (шрифт, также известный как непропорциональный, — это шрифт, все знаки (точнее, кегельные площадки знаков) которого имеют одинаковую ширину, т.е. будь это "ю" или "1" в листинге они займут одинаковые по ширине места). Внутри контейнера можно использовать теги абзаца, переноса строк, а так же теги стилистического и логического выделения. Данный контейнер в основном применяется для опубликования исходного кода программ, так как браузер своим форматированием может нарушить принятые синтаксические конструкции языка программирования. Также этот тег может работать, если в листинг странички вставить текст, предварительно отформатированный в каком-то текстовом редакторе (ворд например). Форматирование такого текста, во всех других случаях теряется, а в контейнере тега PRE сохраняется.

Примеры тега

:

HTML-код:



У попа была собака,
   Он ее любил,
     Она съела кусок мяса
       Он ее убил.

Отображение в браузере:


У попа была собака,
 Он ее любил,
  Она съела кусок мяса
   Он ее убил.
   

 

Приведенный выше текст программы (скрипта), вычисляющий среднее значение по четырем аргументам (JavaScript вам ничего не напоминает ?))), оформлен при помощи заключения фрагмента, предварительно отформатированного в текстовом редакторе, в контейнер <.PRE>...<./PRE>.

> - тег вставки линии-разделителя. Применяется для визуального разделения текста, при помощи горизонтальных линий (не путайте с графическими изображениями в форме разделителей). При отображении линии-разделителя в документе, до и после нее, браузер добавляет разделение абзацев. Формат линии-разделителя задается при помощи следующих атрибутов:

  • ALIGN - выравнивание (LEFT / RIGHT / CENTER);
  • WIDTH - ширина линии (пикселы или проценты к ширине окна WIDTH=50%);
  • SIZE - высота линии (пикселы);
  • COLOR - цвет линии;
  • NOSHADE - отключить эффекты 3-х мерности;

Если атрибуты не прописаны, то страница разделяется по всей ширине обычной чёрной линией.

Примеры тега


:





т.е. линия идёт от левого края, толщина её 5пикселей, её протяжённость 50% ширины страницы, цвет линии - красный.

 

Комментарии и специальные символы

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

Например:. Если не смотреть HTML документ в виде кода, то эта надпись в окне браузера отображаться никак не будет.

Кроме комментариев в HTML документах можно использовать специальные символы. Для внедрения специального символа в документ применяется конструкция следующего формата: &ИМЯ СИМВОЛА. Специальные символы используются для отображения элементов математических символов (÷ это ÷, ¾ это ¾), редких символов национальных алфавитов и общепринятых символов (© - это ©, ® - это ®).

Например, для отображения на веб-странице HTML тегов (это чтобы не прописывать точку или пробел после скобки), необходимо использовать символы заменители угловых скобок (< это <) и (> это >).  В общем то эту страницу я так и писал, но точки всё равно ставил, чтобы визуально подчеркнуть листинги примеров и образцы написания. Еще один часто используемый при форматировании (например создание пустых ячеек в таблицах) спецсимвол это неразрывный пробел  .

Полный список специальных символов HTML можно поглядеть по ссылкам далее:
таблица спецсимволов латиницы,
таблица спецсимволов,
таблица спецсимволов математических и греческих знаков

 

Блоки цитат документа html

Для создания блоков цитат применяют тег <.BLOCKQUOTE>. При этом цитата отображается с дополнительными отступами. Если надо сформировать короткую цитату внутри абзаца, можно использовать тег . Фрагмент текста в этом случае будет заключен в двойные кавычки.
Пример:

пишем так - <.p>Основной текст основной текст основной текст основной текст<./p>  

отображается так - Основной текст основной текст основной текст основной текст

пишем так -  <.p><.blockquote> Блок цитат блок Блок цитат Блок цитат блок цитат Блок цитат блок цитат Блок цитат блок цитатблок цитат Блок цитат блок цитат Блок цитат блок цитат цитат Блок цитат блок цитат Блок цитат блок цитат <./blockquote>

отображается так:

Блок цитат блок Блок цитат Блок цитат блок цитат Блок цитат блок цитат Блок цитат блок цитатблок цитат Блок цитат блок цитат Блок цитат блок цитат цитат Блок цитат блок цитат Блок цитат блок цитат

 

Использование шрифтов в документах

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

 

Существуют технологии внедрения необходимых разработчику шрифтов в веб-страницы. У Microsoft это технология Embedded fonts, а у их конкурентов Netscape, это называется Dinamic fonts. Оба подхода примерно одинаковы, но форматы шрифтов (OpenType и TrueDoc), а так же утилиты для их создания, упаковки и внедрения в документы различаются.

 

Для определения шрифта текста в HTML документах применяется контейнер ... и одиночный тег .

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

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

Для задания характеристик шрифта в тегах <.FONT>...<./FONT> и <.BASEFONT> используются следующие атрибуты:

FACE - Задает имя шрифта (или перечня шрифтов - по мере убывания предпочтения) на компьютере пользователя. В случае отсутствия текст отображается шрифтом, заданным по умолчанию в броузере пользователя. Например:

Пример Arial - Пример Arial

SIZE - абсолютный или относительный размер шрифта. Относительный размер это размер шрифта относительно стиля Normal (SIZE=3) или размера заданного тегом . Минимальное абсолютное значение размера шрифта 1, максимальное 7. Например:

4 абсолютный шрифт - 4 абсолютный шрифт

4 относительный шрифт - 4 относительный шрифт

COLOR - цвет шрифта. Например:

Красный шрифт - Красный шрифт

Красный шрифт - Красный шрифт

Полученные в данном разделе навыки, по форматированию текста, закрепим конкретным примером:

Не забываем про точки после скобок!  

Посмотреть,

четвёртая строка листинга для того, что-бы браузеры отображали текст в корректной кодировке.


<.HEAD>
<.TITLE>Форматирование текстовых данных
<./HEAD>
<.meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<.BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY" >
<.BASEFONT FACE="Times New Roman","Arial" SIZE=4>
<.H1 ALIGN=CENTER>АНЕКДОТЫ<./H1>
<.HR SIZE=5 COLOR=BLACK>
<.FONT SIZE=+2><.U>Анекдот 1<./U><./FONT>
<.P>
Программист едет в трамвае, читает книгу.<.BR>
Старушка смотрит на программиста, смотрит на книгу, крестится <.BR>
и в ужасе выбегает на следующей остановке.<.BR>
Программист читал книгу <.DFN>"Язык Ада"<./DFN>.
<./P>
<.FONT SIZE=+2><.U>Анекдот 2<./U>
<.P>
Программист ставит себе на тумбочку перед сном два стакана. <.BR>
Один с водой - на случай, если захочет ночью пить.<.BR>
А второй пустой - на случай, если не захочет.
<./P>
<.FONT SIZE=+2><.U>Анекдот 3<./U><./FONT>
<.P>
Программист заходит в лифт, нажимает клавишу с номером этажа<.BR>
и мучительно ищет клавишу <.KBD>"enter"<./KBD>.
<./P>
<.HR SIZE=5 COLOR=BLACK>
<.P ALIGN=CENTER>© 2030 Вебмастер-Ваятель
<.A HREF="#"> Пошли мне открытку)) <./A>
<./BODY>
<./HTML>


В заключении следует отметить, что теги управления шрифтами, в последних спецификациях HTML, объявлены выведенными из употребления. На смену данным тегам пришли свойства шрифтов (font-family, font-size, font-style, font-variant, font-weight) из листов стилей CSS

Та же участь постигла и некоторые теги форматирования символов. Они заменены свойствами текста CSS (например тег ... заменен свойством text-decoration:underline, а тег ... заменен свойством text-decoration:line-through).
Вы можете продолжать использовать данные теги, но в современных проектах они поддерживаться не будут.

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

 

 

Поделиться ссылкой на страницу:
Дружно все тыкаем сюда!