Изучение 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 - переменные


Заметки о разном:
об escape последовательностях (символьных объектах), именах, цветовых атрибутах, ширине, пикселях, вертикальном выравнивании (VALIGN), непрерывных пробелах ( ), комментарии

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

Escape последовательности (символьные объекты)

Escape последовательности или, точнее, символьные объекты, представляют собой метод представления специальных символов. Например, escape последовательность &lt; обозначает символ "меньше чем" (<).

Некоторые символы, такие как <, используются в HTML в специальном значении, поэтому должен существовать способ их выражения, как символьных данных внутри самого документа или в URL. Принято использовать следующие нотации (соответствия):

символ обычное имя (имена) символа HTML запись символа (escape последовательность)
< символ "меньше чем", левая угловая скобка &lt;
> символ "больше чем", правая угловая скобка &gt;
& амперсанд &amp;
" двойные кавычки &quot;

Двойные кавычки (") могут использоваться и в пределах обычного текста.

Заметим, что точка с запятой является частью escape последовательности, но в принципе она может быть опущена. Однако одни броузеры обработают такой код HTML, а другие могут и не понять.

В escape последовательности важен вариант написания символов, то есть различаются заглавные и строчные буквы. Например, амперсанд (&) не может быть представлен как &AMP (escape последовательность - неопределена). Escape последовательность &auml; и &Auml; - a умляут (a диерезис, написание a с двумя точками над ней) - обозначает два разных символа и дает д и Д. Escape последовательность написанная прописными буквами идентифицируется как &AUML;.

Необходимость в вышеупомянутых escape последовательностях проистекает из синтаксиса HTML. На самом деле escape последовательности существуют для всех символов в наборе ISO Latin 1. Возьмете себе на заметку следующее:

  • вид записи
    &copy; знак копирайт, ©
    &reg; знак зарегистрированной торговой марки, ®
    &nbsp; непрерывный пробел
  • записи, такие как &AElig; (для AE лигатуры, ?), определены в приложении Символьные объекты для ISO Latin-1 к HTML 3.2 Ссылочным спецификациям.
  • существуют последовательности вида &#n;, где n - позиционный код символа в десятичном исчислении (в диапазоне от 0 до 255)

Есть и другие причины для использования escape последовательностей. Использование &auml; вместо д казалось бы может дать некоторую независимость символьного кода, однако на самом деле это не так - если броузер может вывести &auml; правильно, он может также верно вывести и документ, в котором прямым образом специфицирован символ д. Однако бывает так, что из-за ограничений клавиатуры невозможно прямым образом ввести некоторые специальные символы, и в таких случаях можно воспользоваться нотацией (последовательностью), подобной &auml;.

Некоторые броузеры поддерживают и другие escape последовательности, например, &trade;, &shy;, &cbsp;. Использование таких нотаций не рекомендуется. (Нотация &trade; представляет символ, который вообще не принадлежит к ISO Latin 1. Вместо этого можно использовать проверенную нотацию <SUP><SMALL>TM</SMALL></SUP>. Нотация &shy; задает "мягкий дефис", который имеет неопределенную семантику в HTML. Нотация &cbsp; установленная для "условного прерывающегося пробела", отсутствует в ISO Latin 1 и, возможно, такой символ скоро вообще не будет использоваться.)

Имена

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

  • буквы английского алфавита (A - Z, a - z)
  • цифры (0 - 9)
  • промежутки времени
  • дефисы (-)

и начинающуюся с буквы.

Концепция имени имеет место в описании атрибутов HTTP-EQUIV и NAME элемента META и в описании атрибута NAME элемента PARAM.

Строка символов, которая используется для NAME иногда может содержать и другие символы, однако тогда она должна быть взята в кавычки.

Цвета

В элементах FONT и BODY некоторые конструкции HTML могут быть использованы, чтобы специфицировать цвета: например, цвет фона, цвет текста по умолчанию или цвет текста связи.

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

Для спецификации цвета, как значения атрибута, существуют два варианта:

  • Символьная нотация RED. Определено шестнадцать таких имен (см. ниже), которые можно записывать в любом регистре с кавычками или без.
  • Цифровое обозначение в шестнадцатиричной записи, например, "#FF0000", которая контролирует, каким образом цвет формируется из основных цветов - красного, зеленого и голубого - в так называемое sRGB цветовое пространство, при этом обозначение должно быть взято в кавычки.

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

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

Цветовые имена и sRGB значения
Black (Черный) = "#000000" Green (Зеленый) = "#008000"
Silver (Серебро)= "#C0C0C0" Lime (Известь) = "#00FF00"
Gray (Серый) = "#808080" Olive (Оливковый) = "#808000"
White (Белый) = "#FFFFFF" Yellow (Желтый)= "#FFFF00"
Maroon (Темно-бордовый) = "#800000" Navy (Темно-синий) = "#000080"
Red (Красный) = "#FF0000" Blue (Синий) = "#0000FF"
Purple (Фиолетовый) = "#800080" Teal (Чирок) = "#008080"
Fuchsia (Фуксия) = "#FF00FF" Aqua (Аква) = "#00FFFF"

Эти цвета были первоначально отобраны, как 16 цветный стандарт, поддерживаемый Windows VGA палитрой.

См. также:

Атрибут WIDTH (ширина)

Значение атрибута WIDTH в тегах, например, HR или TABLE можно специфицировать двумя альтернативными путями:

  • как процентную часть промежутка между текущими левой и правой границами; в этом случае значение атрибута должно быть взято в кавычки и за числом процентов должен сразу следовать знак процента, например, WIDTH="80%"
  • в пикселях, при этом задается целое число (кавычки не требуются), например WIDTH=212.

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

Пиксели

Используемые в атрибутах значения пикселя определяют пиксели экрана. Физический размер пикселя определяется монитором пользователя.

При выводе документа на прибор с очень высоким разрешением, например, лазерный принтер, броузеры должны умножать значения в пикселях на соответствующий коэффициент. То есть, если программа просмотра имеет дисплей с 75 пикселями на дюйм, а вывод должен осуществляться на лазерный принтер с 600 точками на дюйм, значение атрибута HTML в пикселях умножается на 8.

Вертикальное выравнивание (VALIGN)

В некоторых тегах, связанных с таблицами, может быть использован атрибут VALIGN для управления вертикальным выравниванием, т.е. позиционированием в вертикальном направлении ячеек таблицы.

Чтобы позиционировать содержимое ячеек в верхней части, середине или нижней части ячейки таблицы соответственно, задаются следующие значения атрибута VALIGN: TOP (верх), MIDDLE (середина), BOTTOM (низ).

По умолчанию VALIGN=MIDDLE.

Непрерывный пробел (&nbsp;) (Non-breaking spaces)

Последовательность &nbsp; является escape нотацией для символа, который в других контекстах обычно называется непрерывным пробелом, или, для краткости, NBSP. Согласно ISO 8859, этот символ должен быть представлен, как обыкновенный пробел (пропуск, пустое место), однако такой, который не заменялся бы переводом строки (как это часто бывает с обыкновенным пробелом в текстовой обработке). То есть для того, чтобы два слова были на одной строке с некоторым расстоянием между ними, между этими словами должны появиться непрерывные пробелы. (Действительная ширина промежутка между словами может меняться, и нет необходимости привязываться к определенному количеству пробелов в файле HTML.)

Вопрос о том, надо предупреждать перевод строки, когда осуществляется вывод HTML документа, не имеет однозначного ответа. Спецификации HTML 2.0 говорят:

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

Более того, хотя HTML 3.2 Ссылочные спецификации не вносят ясности в этот вопрос, в разделе описания атрибута NOWRAP элементов TH и TD указывается, что знак &nbsp; должен действовать как непрерывный пробел, по крайней мере в пределах ячеек таблицы.

Если Вы используете непрерывные пробелы, используйте их вместо обычных пробелов, а не в дополнение к ним. Например, если Вы хотите предупредить перевод строки между version и 3, наберите version&nbsp;3 (но не version&nbsp; 3).

С другой стороны, в таблице в HTML 3.2 &nbsp; может иметь совершенно другое значение, которое может быть описано, как непустое пространство: когда таблица представлена с бордюром, ячейки без содержания (просто пробелы не учитываются) изображаются без бордюра, однако &nbsp; в разметке указывается!

Комментарии

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

Вы можете начать комментарии с четырехсимвольной последовательности <!-- (знак "меньше чем", восклицательный знак, два дефиса) и завершить его трехсимвольной последовательностью --> (два дефиса, знак "больше чем"). Например: <!-- Написано Юккой Корпела -->.

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

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

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


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

 
Hosted by uCoz