Изучение HTML, Уроки HTML, Советы HTML, Практические рекомендации, Примеры HTML

Главная | Ссылки | Полезное
Введение
Для кого?
О чем?
Зачем Вам изучать HTML?
Почему HTML 3.2?
Рамки этого документа
О версиях этого пособия
Лучше посмотреть на...
Как изучать HTML 3.2
Получение общей начальной информации о HTML
Систематическое изучение HTML 3.2
Официальная HTML 3.2 спецификация
Дополнительные источники информации
Проверьте Ваш HTML
Общие замечания по синтаксису HTML
Набор символов
Теги HTML
Элементы HTML
Aтрибуты
URLs
Case чувствительность (чувствительность к выбору)
Разделение на строки и использование пробелов и символов табуляции
Классификация элементов
Разрешенная вложенность элементов
Заметки о разном: об escape последовательностях (символьных объектах), именах, цветовых атрибутах, ширине, пикселях, вертикальном выравнивании (VALIGN), непрерывных пробелах ( ), комментарии
Media types
Основные структуры HTML 3.2 документа (с примерами)
Обязательная структура документа
Рекомендуемая структура документа
Информация о документе - раздел HEAD
Организация содержания - заголовки (headings), абзацы (paragraphs), списки (lists) и т.п.
Разметка текста - выделение шрифта, цитирование, код и т.п.
Управление размещением
Связи
Изображения, формулы и т.п.
Таблицы - tables (Нет в HTML 2.0!)
Таблицы стилей
Описания тегов HTML 3.2
Индексы и надписи
A - якоря (anchors), гиперсвязи (hyperlinks), и т.д.
ADDRESS (АДРЕС) - информация об авторе информации
APPLET - Java апплеты (Нет в HTML 2.0!)
AREA (ОБЛАСТЬ) - область в реагирующей на нажатие клавиши схеме (MAP) (Нет в HTML 2.0!)
B - жирный шрифт
BASE - базовый, основной URL
BASEFONT (БАЗОВЫЙ ШРИФТ) - размер базового шрифта (Нет в HTML 2.0!)
BIG (БОЛЬШОЙ) - большой шрифт (Нет в HTML 2.0!)
BLOCKQUOTE (БЛОК ЦИТИРОВАНИЯ) - длинное цитирование
BODY (ТЕЛО) - тело документа
BR - перевод строки
CAPTION (ЗАГОЛОВОК) - заголовок для таблицы (Нет в HTML 2.0!)
CENTER (ЦЕНТР) - центрирование (Нет в HTML 2.0!)
CITE - ссылки
CODE (КОД) - программный код
DD - определение данных
DFN - определение (Нет в HTML 2.0!)
DIR - ненумерованный список в директории
DIV - разделитель документа (Нет в HTML 2.0!)
DL - дефинитивные или описательные списки
DT - дефинитивный термин
EM - подчеркивание
FONT (ШРИФТ) - размер и цвет шрифта (Нет в HTML 2.0!)
FORM (ФОРМА) - заполняемая форма
H1, H2, H3, H4, H5, H6 - заголовки
HEAD (ЗАГОЛОВОК) - заголовок документа
HR - изменение раздела (горизонтальная черта)
HTML - элемент верхнего уровня
I - курсив
IMG - линейные изображения
INPUT - поля ввода в формах
ISINDEX - простой поиск по ключевым словам
KBD - ввод с клавиатуры
LI - списковый элемент
LINK (СВЯЗЬ) - связь с другими документами
MAP - реагирующая на нажатие клавиш карта (Нет в HTML 2.0!)
MENU (МЕНЮ) - ненумеруемый список менюподобных форм
META - метаинформация
OL - упорядоченные (нумерованные) списки
OPTION - элемент выбора в меню
P - обычный абзац
PARAM - параметры апплета (Нет в HTML 2.0!)
PRE - предварительно отформатированный текст
SAMP - образец вывода
SCRIPT - зарезервирован для будущего использования (Нет в HTML 2.0!)
SELECT (ВЫБРАТЬ) - меню выбора в форме
SMALL (МАЛЫЙ) - малый шрифт (Нет в HTML 2.0!)
STRIKE - перечеркнутый текст (Нет в HTML 2.0!)
STRONG - сильное подчеркивание
STYLE - таблицы стилей (Нет в HTML 2.0!)
SUB - подстрочный знак (Нет в HTML 2.0!)
SUP - надстрочный знак (Нет в HTML 2.0!)
TABLE - таблицы (Нет в HTML 2.0!)
TD - табличные данные (ячейка) (Нет в HTML 2.0!)
TEXTAREA - многострочное поле текстового ввода в форме
TH - табличный заголовок (ячейка) (Нет в HTML 2.0!)
TITLE - "внешний" заголовок (титул)
TR - табличная строка (Нет в HTML 2.0!)
TT - телетайпный (одноразмерный) текст
U - подчеркивание (Нет в HTML 2.0!)
UL - неупорядоченные (ненумерованные) списки
VAR - переменные


Разметка текста - выделение шрифта, цитирование, код и т.п.

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

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

Предпочтение должно отдаваться логической разметке. Используйте физическую разметку только, если это действительно соответствует требованиям представления текста. Например, для сильного выделения используйте элемент STRONG, а не B, в предположении, что различные Web броузеры реализуют подчеркивания лучшим образом для того окружения, в котором они установлены.

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

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

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

This has some <B>bold and <I></B>italic text</I>.

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

Пример nest.html:

This is <I>italic text which contains <U>underlined text</U> within in </I> whereas <U>this is normal underlined text</U>.

Броузеры с ограниченным набором шрифтов могут иметь трудности в представлении разметки текста.

Элементы фразы (логическая разметка текста)

Для выделениятекста существует два фразовых элемента - EM и STRONG, где STRONG используется для более сильного выделения.

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

К сожалению, не существует "де-выделяющего" элемента фразы, обозначающего менее важный текст. Если Вам действительно это необходимо, можно использовать элемент SMALL. Однако, если менее важный текст объемен, лучше его вынести в отдельный документ, связь с которым указать в главном документе. Лицо, которое последует по таким связям, заинтересовавшись текстом, вероятно, предпочтет увидеть нормальный текст, и поэтому нет необходимости в каком-либо "де-подчеркивании"

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

Элемент VAR показывает, что часть текста (обычно слово) является переменной, т.е. текстом, который может быть заменен различными выражениями.

Следующие фразовые элементы задают различные виды ссылок или цитирования:

CITE цитирование (название книги, или статьи, или - эквивалент)
CODE код программы или - эквивалент (например, HTML)
SAMP служебные сообщения компьютера (вывод из программы, скрипты, команды и т.п.)
KBD текст, который должен печататься на клавиатуре пользователя; обычно используется для инструкций.

Смотрите также замечания и примеры по вопросам отображения разметки.

Шрифтовые элементы (font elements) - физическая разметка текста

Шрифтовые элементы это:

TT "телетайпный" текст, т.е. текст одного размера
I курсив
B выделение
U подчеркивание
STRIKE зачеркнутый текст
BIG большой шрифт
SMALL малый шрифт
SUB подстрочный текст
SUP надстрочный текст.

Заметим: SUB и SUP могут быть отнесены к разметке фразового уровня, как упоминалось выше; SMALL может быть использован для де-подчеркивания.

Элементы FONT и BASEFONT предлагают много возможностей для задания размеров шрифта по сравнению с BIG и SMALL. Однако избегайте чрезмерного использования физической разметки.

Отображение разметки

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

Например, некоторые броузеры (возьмем Internet Explorer) отображают TTCODE) как шрифт, значительно меньший, чем обычный текст, и эта диспропорция сохраняется, когда изменяются размеры шрифта. Более того, Internet Explorer воспроизводит VAR как моноширинный (monospaced) шрифт, в то время как большинство графических броузеров использует курсив (italic). С другой стороны, в Netscape, размеры шрифта можно специально устанавливать, а по умолчанию для TT и VAR используются одни и те же шрифты, однако "одни и те же" означает технический размер в точках - на практике моноширинные шрифты выглядят больше, чем нормальный пропорциональный шрифт!

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

В следующей таблице сделана попытка дать представление о диапазоне возможностей броузеров. Она представляет отображение элементов разметки в Netscape Navigator, Microsoft Internet Explorer и Lynx. Заметим, что существуют вариации даже в пределах каждой из этих программ - в зависимости от версии, платформы, конфигурации системы или собственной пользовательской конфигурации, - такой разброс соответствует действительности. Таким образом, данные таблицы могут быть, но не обязательно имеют место в действительности.

элемент Netscape Internet Explorer Lynx
EM курсив курсив подчеркнутый
DFN обычный текст курсив обычный (одноразмерный)
CODE одноразмерный малый одноразмерный обычный (одноразмерный)
SAMP одноразмерный малый одноразмерный обычный (одноразмерный)
KBD одноразмерный малый одноразмерный обычный (одноразмерный)
VAR курсив малый одноразмерный обычный (одноразмерный)
CITE курсив курсив подчеркнутый
TT одноразмерный малый одноразмерный обычный (одноразмерный)
I курсив курсив подчеркнутый
B усиленный усиленный подчеркнутый
U обычный текст подчеркнутый подчеркнутый
STRIKE зачеркивание зачеркивание текст между[DEL: и :DEL]
BIG больший, чем обычный больший, чем обычный обычный текст
SMALL меньший, чем обычный немного меньший, чем обычный обычный текст
SUB опущенный, немного меньший опущенный обычный текст
SUP поднятый, немного больший поднятый обычный текст

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

Представление взаимодействия с компьютером

Для представления взаимодействия человека с компьютером на текстовой или другой основе могут использоваться следующие подходы:

  • компьютерный вывод (подсказки, обычный вывод или сообщения об ошибках) в пределах SAMP элементов
  • общие термины, описывающие ввод пользователя - внутри VAR элементов
  • действительный пользовательский ввод в пределах KBD элементов
  • цитируемый компьютерный программный код (источник), реализуемый в пределах CODE элементов.

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

Следующий пример иллюстрирует подход в контексте введения в язык программирования Perl.

Пример interact.html:

<P>The following Perl script prints out its input so that each line begins with a running line number:</P> <PRE> <CODE> #!/usr/bin/perl $line = 1; while (&amplt&ampgt) { print $line++, " ", $_; } </CODE> </PRE> <P>The scalar variable <CODE>$line</CODE> is of course the line counter.<P> <P>The loop construct is of the form<BR> <CODE>while (&amplt&ampgt) {</CODE><BR> <VAR>process one line of input</VAR> <CODE>}</CODE><BR> </P> <P>Assuming that you have written this script (the simpler version of it) into a file named <KBD>lines</KBD>, you could test it using a command of the form<BR> <KBD>./lines</KBD> <VAR>datafile</VAR><BR> In particular, using the script as input to itself, you would do as follows (the details of system output vary from one system to another): </P> <PRE> <SAMP>lk-hp-23 perl 251 % </SAMP><KBD>./lines lines</KBD> <SAMP>1 #!/usr/bin/perl 2 $line = 1; 3 while (<>) { 4 print $line++, " ", $_; } lk-hp-23 perl 252 % </SAMP> </PRE>

Замечания к примеру:

  • здесь не использовалась вложенность текстовых разметок.
  • программный код мог бы быть представлен только в пределах PRE элемента без дополнительного использования внутри еще и CODE элемента, однако то, что код вложен в CODE элемент, который в свою очередь вложен внутрь PRE элемента, не нанесет вреда и может быть даже полезно в броузерах, которые для различных целей используют моноширинные шрифты.
  • аналогично, использование SAMP и KBD в приведенном примере может означать, что ввод пользователя представляется отлично от компьютерного вывода. Используя таблицу стилей, Вы могли бы даже специфицировать шрифт, цвет, фон и другие свойства для этих логически различных элементов.

   Тексты принадлежат их владельцам!  

 
Hosted by uCoz