Тэги логического форматирования текста

Тэг

Тэг < ABBR > отмечает свой текст как аббревиатуру ( ABBReviation ).

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

Тэг

Тэг < ACRONYM > . Так же, как и тэг < ABBR > , используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы ,т. е. произносимые слова, состоящие из аббревиатур. Тэг < ACRONYM > возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.

Данный тэг удобно использовать в сочетании с параметром TITLE , в качестве значения которого можно указать полную версию аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом < ACRONYM > , будут выдавать полное наименование в виде появляющейся подсказки.

ТПУ .

Тег H1...H6

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег

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

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

...

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

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

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

Заголовок третьего уровня

В браузере это будет выглядеть так:

Тэг <СIТЕ>

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

Нельзя сказать человеку: "Ты можешь творить. Так давай, твори". Гораздо вернее подождать, пока он сам не скажет: "Я могу творить, и я буду творить, хотите вы этого или нет".

Айзек Азимов

Тэг

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

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

 
Код программы
 

 
 function checkParent (src, dest) {

 while (src != null) {

 if (src.tagName == dest) return src

 src = src.parentElement

 }

 return null

 }
 
 


Тэг 
Тэг 
 отмечает свой текст как удаленный
.Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тэг 
 может использоваться как элемент уровня текста и как элемент уровня блока.
Тэг имеет два необязательных параметра: CITE
 и DATETIME
. Значение параметра CITE
 должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента.
Параметр DATETIME
 указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD
, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс
 ( Time Zone
).
 
Тэги физического форматирования текста
 
Тег 
Заключенные между этими тег имеет свойства жирного текста. Имеет атрибут title
 - позывает текст в виде всплывающей подсказки.


Тег 
Данный тег увеличивает размер отображения текста.Имеет атрибут title
 - позывает текст в виде всплывающей подсказки.
 Пример физического форматирования 


Тег 
Служит для выбора шрифта для текста. Атрибуты:
size
 - размер текста от 1 до 7

color
 - цвет текста

 Пример физического форматирования


Тег 
Данный тег вставляет в страницу горизонтальную линию. Атрибуты:
size
 - высота и толщина линии
width
 - ширина линии
noshade
 - создание линии без тени
color
 - меняет цвет линии


 
Среди тегов, влияющих на начертание шрифта, различают теги физического и логического форматирования
. В большинстве случаев применение сходных по значению тегов физического и логического форматирования приводит к одному и тому же эффекту. Различие между ними состоит в том, что теги физического форматирования прямо указывают на то, какие свойства шрифта следует изменить (например, сделать жирным), в то время как теги логического форматирования указывают, какой это текст (например, важный).
Указание интонации текста (это и делают теги логического форматирования) вместо явного задания его свойств позволяет управлять его отображением. Приведем пример: вы считаете, что важный текст должен выделяться не жирным шрифтом, а красным цветом. При использовании тегов логического форматирования и браузера, поддерживающего такую возможность, вы можете настроить отображение текста, форматированного логически. Текст, форматированный физически, всегда будет отображаться так, как это задумал автор. Разумеется, если вы хотите, чтобы текст был именно жирным, используйте физическое форматирование. В противном случае рекомендуется использовать теги логического форматирования.
Разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов  и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен. 
Пока
 равнозначен.
Другие теги логического форматирования:
  - служит для описания определений;  - служит для выделения цитат;  - ;  - используется для ввода с клавиатуры пользователя;  - используется для отметки результатов, выдаваемых программами, для выделения нескольких символов моноширинным шрифтом: ;  - используется для символьных переменных;  - используется для аббревиатур (СНГ, КПСС, WWW);  - используется для сокращений (стр. , англ.) с атрибутом TITLE;  - цитированный текст в кавычках. 
Теги  и  используются, когда нужно напомнить самому себе о том, что данный кусок текста должен быть (или уже
) вставлен или удален. Применяются при создании сайта группой дизайнеров. Могут иметь атрибуты datetime, cite, title . В datetime можно указать дату и время удаления/вставки. В cite ставится ссылка на URL, по которому содержится пояснение к данному отрывку. С помощью title пояснения вставляются прямо в тег.
Не путайте тег  с тегом 
Являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов кода!


Тег 
Тег  отмечает свой текст как аббревиатуру (ABBReviation).
 Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего
 времени не поддерживается ни одним браузером.
Тег 
Тег . Так же, как и тег , используется
 для отметки аббревиатур. Этим тегом рекомендуется отмечать так называемые акронимы,
 т. е. произносимые слова, состоящие из аббревиатур. Тег  возможно
 в будущем станет использоваться для невизуального отображения элементов, например
 при речевом синтезе.
Данный тег удобно использовать в сочетании с параметром
 TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры.
 Тогда визуальные браузеры при наведении курсора на текст, размеченный тегом
 , будут выдавать полное наименование в виде появляющейся подсказки.
Заметим, что тег  распознается только браузером
 Microsoft Internet Explorer. Пример:
 СПбГИТМО
 - один из ведущих технических вузов Санкт-Петербурга
Тег 
Тег  используется для отметки цитат или названий
 книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно
 выводится курсивом. Пример:
Невское время является
 одной из наиболее популярных городских газет Санкт-Петербурга
Тег 
Тег  отмечает свой текст как небольшой фрагмент
 программного кода. Как правило, отображается моноширинным шрифтом. Этот тег
 не следует путать с тегом 
Являющимся элементом уровня блока, который
 следует использовать для отметки больших фрагментов (листингов) кода.
Например:
Пример простейшего оператора языка программирования
 C:
puts("Hello, World!");
Есть еще одно различие в использовании тегов 
 и 
В коде программ часто бывает важно наличие нескольких идущих
 подряд пробелов. Их отображение будет сохранено только при использовании тега
 
 Тэг 
Тэг  отмечает свой текст как удаленный. Этот
 элемент полезно использовать для отметки изменений, вносимых в документ от версии
 к версии. Тэг  может использоваться как элемент уровня текста и как
 элемент уровня блока.
Тег имеет два необязательных параметра: CITE и DATETIME.
 Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
 причины удаления данного фрагмента.
Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD,
 определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой
 пояс (Time Zone). Например:
Последней принятой спецификацией языка разметки
 HTML является версия 3.2
 4.0
Текст, помеченный тегом  обычно отображается
 перечеркнутым текстом. В спецификации HTML 4.0 этому тегу отдается предпочтение
 перед тегом физического форматирования  или , обозначающих
 перечеркнутый текст. Однако тег  
Тег 
Тег  отмечает свой текстовый фрагмент как определение
 (DeFinitioN). Например, этим тегом можно отметить какой-либо термин, когда он
 встречается в тексте в первый раз. Пример:
Internet Explorer - это
 популярный Web-браузер
Тег  поддерживается только браузером Microsoft
 Internet Explorer. Отображается по умолчанию курсивом.
 Тег 
Тег  отмечает свой текст как вставку (INSertion).
 Этот элемент полезно использовать для отметки изменений, вносимых в документ
 от версии к версии. Тег  может использоваться как элемент уровня
 текста и как элемент уровня блока.
Тег имеет два необязательных параметра: CITE и DATETIME.
 Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
 подробности внесенных дополнений.
Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD,
 определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой
 пояс (Time Zone).
Текст, помеченный тегом , обычно отображается
 подчеркнутым текстом. Тег  в настоящее время распознается только
 браузером Microsoft Internet Explorer.
 Тег 
Тег  (EMphasis - выделение, подчеркивание) используется
 для выделения важных фрагментов текста. Браузеры обычно отображают такой текст
 курсивом. Пример:
Пример выделения отдельных слов
 текста
 .
 Тег 
Тег  отмечает текст как вводимый пользователем
 с клавиатуры. Обычно отображается моноширинным шрифтом, например:
Чтобы запустить текстовый редактор, напечатайте: notepad
Применение данного тега предпочтительнее применения тега
 физического форматирования .
 Тег 
Тег  отмечает короткие цитаты в строке текста.
 В отличие от тега уровня блока 
 при отображении не выполняется
 отделение размеченного текста пустыми строками. Обычно отображается курсивом.
 Тег  (в отличие от 
) в настоящее время распознается
 только браузером Microsoft Internet Explorer.
Тег имеет параметр CITE, в качестве значения которого можно
 указать источник цитаты.
 Тег 
Тег  отмечает текст как образец (SAMPle). Обычное
 использование этого тега - отметка текста, выдаваемого программами (sample output).
 Используется также для выделения нескольких символов моноширинным шрифтом.
Применение данного тега предпочтительнее применения тега
 физического форматирования . Например:
В результате работы программы будет напечатано:
 Hello, World!.
 Тег 
Тег , как правило, используется для выделения
 важных фрагментов текста. Браузеры обычно отображают такой текст полужирным
 шрифтом. Пример:
Санкт-Петербург расположен в самой восточной оконечности
 Финского залива в устье реки Невы
Применение данного тега предпочтительнее применения тега
 физического форматирования . Тегом  обычно размечают
 более важные фрагменты текста, чем те, что размечены тегом .
 Тег 
Тег  отмечает имена переменных программ. Обычно
 такой текст отображается курсивом. Пример:
Задайте значение переменной N

Отображение некоторых из примеров, приведенных при описании
 тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно,
 как при наведении указателя мыши на текст, отмеченный тегом ,
 выдается подсказка.
Рис. 1.1.

 Примеры форматирования текста
Вы, наверное, обратили внимание на то, что некоторые элементы
 дают одинаковый результат. Более того, часть элементов может никак не изменять
 представление фрагмента текста на экране. Может возникнуть законный вопрос:
 для чего создано такое разнообразие элементов форматирования?
Ответ - в названии этой группы элементов. Они предназначены
 для расстановки логических ударений, выделения логических частей и подчеркивания
 сути высказываний. Их использование весьма актуально, поскольку, вероятно, в
 ближайшем будущем возможности браузеров возрастут, например, станет возможен
 поиск цитат на Web-пространстве, а может быть следующее поколение браузеров
 научится читать документы вслух. Кроме того, авторам документов ничто не мешает
 уже сегодня, применяя таблицы стилей, задать желаемое отображение для любого
 из тегов, переопределив значения по умолчанию.


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

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

 
Задание
:
 
1. Перепишите способы форматирования в отчет.
 
2. Оформите сайт, используя атрибуты тега , проверьте, как работают атрибут тега 
И тег <
 CENTER>
 и запишите в отчет результаты.
 
3. Добавьте в сайт несколько заголовков разной величины и запишите в отчет их действие.
 
4. В окне сайта отобразите несколько раз формулу X 0 =y 2 +3.
 
5. Отредактируйте свою страницу используя тег  и вставку специальных символов.

 
6. Проверьте работу тегов логического форматирования.
 
7. Приложите к отчету листинг готового html-документа.
 
Лабораторная работа № 3
 
Использование объектов

 
Цель:
 освоить теги html, синтаксис языка
 
Результат обучения:
Студент должен научиться использовать гиперссылки, вставлять разделители, бегущую строку, создавать списки.
 
Ход работы

 
Атрибуты тега 

 
О теге , обозначающем тело (основную часть) документа Html, мы уже говорили в предыдущих лабораторных работах. Необходимо добавить лишь то, что в общем виде синтаксис записи тега со семи допустимыми атрибутами выглядит так:
 
 тело документа 
 
Атрибут background позволяет поместить дизайнеру некий фоновый рисунок, записав в качестве URL его адрес. Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его Html файл. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера.
 
Атрибут text позволяет задать цвет текста для всего документа в целом. Однако, Вы можете изменить цвет участка текста путем использования команды  с атрибутом .

 
Атрибут bgcolor используется для назначения фонового цвета всему документу. Атрибуты background и bgcolor не исключают друг друга, однако у первого имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибуты, сначала выполняется заливка web-страницы цветом, поверх которого помещается изображение.
 
Атрибут link дает мастеру возможность назначить цвет не посещенной гиперссылки, т.е. ссылки, к которой еще не обращались. По умолчанию ей присваивается значение "blue"
 
 
Атрибут alink определяет цвет активной гиперссылки, который она принимает с момента нажатия на нее курсором до момента загрузки вызываемого ею ресурса. По умолчанию данный атрибут также имеет значение "purple".
 
Списки

 
Маркированные и нумерованные списки были разработаны для отображения упорядоченной информации в виде позиционированных по смыслу вхождений. Например, маркированный список:
 
· Вхождение 1
 
· Вхождение 2
 
· Вхождение 3
 
На языке HTML подобный список можно представить при помощи команды 
:

 

 
Вхождение 1

 
Вхождение 2

 
Вхождение 3

 
Атрибут type позволяет программисту управлять буллет-стилем (т.е.внешним видом) и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений:
 
Disc - метки в виде окружностей, заполненных черным цветом
 
Circle - в виде полых окружностей
 
Square - в виде квадратов, заполненных черным цветом.
 
По умолчанию type= "Disc"
 
Нумерованный список можно представить с использованием тега 
:

 

 
 Вхождение 1 

 
 Вхождение 2 

 
 Вхождение 3 

 
Атрибут type может принимать одно из следующих значений:
 
"1" - обычные арабские цифры 1,2,3 и т.д.
 
"I" - римские цифры в заглавном регистре I, II, III, IV и т.д.
 
"i" - римские цифры в строчном регистре i, ii, iii и т.д.
 
"А" - символьная маркировка в заглавном регистре А, В, С и т.д.
 
"а" - символьная маркировка в строчном регистре a, b, c и т.д.
 
Атрибут start позволяет задать позицию, с которой следует начать маркировку. Например, если ввести type= "1" start="5", то нумерация начнется с цифры 5. Если ввести type= "А" start="D", то маркировка начнется с символа D.
 
По умолчанию значение атрибута type принимается как "1", нумерация начинается с первого элемента в каждом из типов маркировки.
 
Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой. Например, для создания списка:
 
1. Вхождение 1
 
· Вхождение 1-а
 
· Вхождение 1-б
 
2. Вхождение 2
 
· Вхождение 2-а
 
· Вхождение 2-б
 
Введем следующий набор команд
 
Вхождение 1 

 
 Вхождение 1-а 

 
 Вхождение 1-б 

 
 Вхождение 2 

 
 Вхождение 1-а 

 
 Вхождение 1-б 

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

 
 Вхождение 

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

 
Заголовок группы вхождений 1
 
Вхождение 1-а
 
Вхождение 1-б
 
Заголовок группы вхождений 2
 
Вхождение 2-а
 
Вхождение 2-б
 
Введем следующее:
 
 Заголовок группы вхождений 1

 
 Вхождение 1-а

 
 Вхождение 1-б

 
 Заголовок группы вхождений 2

 
 Вхождение 2-а

 
 Вхождение 2-б

 
Закрывающие теги 
 и 
 списка определений можно опустить.

 
Разделители

 
Для того, чтобы визуально отделить часть объектов html-документов от других, например горизонтальной чертой, применяется тег 
. Общий синтаксис тега выглядит следующим образом:

 

 
Атрибут ALIGN определяет положение горизонтальной черты: center, left и right.
 
Атрибут WIDTH определяет длину линии, причем его значение можно задавать либо в пикселях простым целым числом, либо в процентах от ширины экрана при помощи чисел от 1-100 с добавлением символа %.
 
Атрибут SIZE задает толщину линии в пикселях, значение которого - целое число.
 
Атрибут COLOR определяет цвет заливки линии.
 
Например:
 

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

 
Для задания бегущей строки используется тег:
 
текст бегущей строки с атрибутами:
 
width=”…” – задаёт ширину бегущей строки в пикселях или в процентах от ширины экрана.
 
height=”…” - задаёт высоту бегущей строки в пикселях или в процентах от ширины экрана.
 
bgcolor=”…”- задаёт цвет фона бегущей строки.
 
behavior=”…”-задаёт тип движения бегущей строки и может иметь следующие значения: scroll-циклическая прокрутка из одного конца в другой, slide-текст появляется с одного края и останавливается у другого, alternate-текст перемещается от одного края к другому
 
(маятник).
 
direction=”…”-задаёт направление движения бегущей строки и может иметь следующие значения: left, right, Up,down.
 
scrollamout=”…”задаёт число пикселей, который отделяют один текст от последующего.
 
scrolldelay=”…” – указывает задержку в миллисекундах перед появлением следующего текстового блока.
 
loop=”…”-задаёт число повторений (любое положительное число. По умолчанию или при указании –1 или infinite, броузер будет прокручивать текст бесконечное количество раз.
 
 
Гиперссылкой может быть текст, изображение, часть изображения. Текст, который является гиперссылкой, выделяется цветом и подчёркивается. Текстовые гиперссылки можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку.
 
 
 
 target=”параметр”

 
title=”альтернативный текст”> текст_гиперссылки 
 
Атрибут href указывает на адрес страницы, с которой Вы планируете установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, http://www.server.ru/page.html), если целевой документ физически расположен на другом сервере, так и в виде сокращенного URL с указанием пути к искомой страницы в пределах локального сервера (например, “/folder/page.html”). Если искомый документ расположен в одной директории с текущим, в качестве параметра атрибута href достаточно записать его название.
 
Атрибут target содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом подчеркивания. Например, часто встречающееся значение атрибута target= «_blank» отображает открываемый по ссылке документ в новом окне броузера.
 
Атрибут title предназначен для создания всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит указатель мыши над гиперссылкой на несколько секунд.
 
 
 
Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы раздел или участок текста. При активизации подобной гиперссылки броузер «отматывает» таким образом, что искомый раздел или фраза оказываются в верхней его части.
 
Процесс создания ссылки на раздел условно делится на два этапа. Первый – подготовка «закладки» - специальной метки с уникальным в пределах данного документа именем. Для этого, в том участке текста, где необходимо разместить метку, применяется следующая команда:
 
 ключевое слово или заголовок раздела 
 
 
 
Помните, что для задания имени закладки лучше использовать латинские символы.
 
Если Вы хотите разместить ссылку на раздел другого документа, описанный выше алгоритм сохраняется, за исключением того, что в вызывающем теге перед именем закладки указывается URL документа. В этом случае рекомендуется использовать атрибут TARGET с параметром _BLANK. Подобная команда в обобщенном виде будет выглядеть следующим образом: