4. Язык HTML
4.1 Характеристики языка
Язык HTML - HyperText Markup Language - язык гипертекстовой разметки. В основе - теги - управляющие выражения. Отражаются в строке состояния документа.
Просмотр HTML-кода кнопкой Code панели Document и его чистка из меню Commands.Clean Up HTML. Проверка совместимости File.Check Page.Check Target Browsers.
4.2 Теги
Справка по тегам в окне Code на вкладке Reference (Window.Reference). Классификация тегов:
- парные (например, <A>...</A>) - одинарные (<P>)
- парные: <открывающий> - </закрывающий>
- физического форматирования (<B>) - логического форматирования (<P>)
- видимые (<A>)- невидимые (<HTML>)
- родители - потомки с уровнями вложенности, начиная с 0
- стандартные - нестандартные
- с параметрами (<A> href="...") - без параметров (<B>)
- параметры: обязательные (href) - необязательные (target)
- параметры: со значением (href) - без значения (noshade)
Некоторые теги
| Тег |
Название |
Парный |
Примеры параметров |
Теги страницы |
| HTML |
Документ |
да |
|
| HEAD |
Заголовок документа |
да |
|
| TYTLE |
Название документа |
да |
|
| BODY |
Тело документа |
да |
|
| CLASS |
Класс |
нет |
onLoad |
| COMMENT |
Комментарий |
да |
(вариант: <!--...-->) |
| FRAME |
Фрейм |
нет |
|
| FRAMESET |
Набор фреймов |
да |
|
| LINK |
Ссылка в заголовке документа |
нет |
|
| META |
Метатег |
нет |
|
| NOFRAMES |
Страница без фреймов |
да |
|
| SCRIPT |
Скрипт |
да |
|
| NOSCRIPT |
Не скрипт |
да |
|
Теги элементов страницы |
| A |
Гиперссылка |
да |
href, target |
| ADDRESS |
Адрес |
да |
|
| AREA |
Область карты |
нет |
|
| CITE |
Цитата |
да |
|
| HR |
Линия |
нет |
align, color, noshade, size, width, height |
| IMG |
Изображение |
нет |
src |
| MAP |
Карта |
да |
|
| OBJECT |
Объект |
да |
|
Теги форматирования |
| B |
Полужирный |
да |
|
| BIG |
Крупный шрифт |
да |
|
| BLOCKQUOTE |
Блок текста |
да |
|
| BR |
Разрыв строки |
нет |
|
| DIV |
Структура текста |
да |
id, style |
| EM |
Выделение фразы (I) |
да |
|
| FONT |
Шрифт |
да |
color, face, size |
| H1...6 |
Заголовки разделов |
да |
|
| I |
Курсив |
да |
|
| P |
Абзац |
нет |
style, align, |
| Q |
Цитата |
да |
|
| SMALL |
Мелкий шрифт |
да |
|
| SPAN |
Авторский формат |
да |
|
| STRONG |
Логическое выделение (B) |
да |
|
| STYLE |
Стиль |
да |
|
Теги списков |
| OL |
Список нумерованный |
да |
|
| UL |
Список маркированный |
да |
|
| LI |
Элемент списка |
да |
|
Теги форм |
| FORM |
Форма |
да |
|
| BUTTON |
Кнопка |
да |
|
| INPUT |
Поле |
нет |
|
| LABEL |
Надпись |
да |
|
| LEGEND |
Пояснение |
да |
|
| OPTION |
Переключатель |
да |
|
| OPTGROUP |
Группа переключателей |
да |
|
| SELECT |
Флажок |
да |
|
| TEXTAREA |
Поле мемо |
да |
|
Теги таблиц |
| TABLE |
Таблица |
да |
background, width, height, border, cellspacing, cellpadding, caption |
| CAPTION |
Название таблицы |
да |
|
| COL |
Свойства столбца |
да |
|
| COLGROUP |
Свойства группы столбцов |
да |
|
| TH |
Элемент ячейки |
да |
|
| TR |
Строка таблицы |
да |
|
| TD |
Ячейка таблицы |
да |
colspan, rowspan |
| TBODY |
Тело таблицы |
да |
|
| THEAD |
Заголовок таблицы |
да |
|
| TFOOT |
Примечание таблицы |
да |
|
4.3 Метатеги
Метатеги - это особые теги HTML, дающие в коде страницы информацию о ней для поисковых систем и рекламы. Здесь помещается краткое описание страницы (Content), набор ключевых слов (keywords), базовый адрес страницы (Base), текстовая кодировка (CHARSET). Размещаются в секции HTML-заголовка страницы (тег HEAD). Большинство из них создается в одинарном теге META с параметрами типа метатега NAME или HTTP-EQUIV.
Для правки существующих метатегов служит меню View.Head Content, открывающее панель заголовка страницы. Ее кнопки позволяют изменять существующие метатеги. Для создания новых используется кнопка Head вкладки HTML панели Insert. Под ней заполняются Description, Keywords через запятые без пробелов, Base. Ключевые слова должны встречаться в описании страницы, в названии страницы (тег Title), в заголовках H1-H6, в текстах гиперссылок и в обычном тексте. Метатег перезагрузки Refresh задает интервал обновления страницы и перенаправления посетителя на другую страницу.
Полезно, чтобы каждая страница сайта имела свой набор метатегов. На страницах с наборами фреймов создают фиктивное содержимое с помощью парного тега NOFRAMES, либо помещают ключевые слова в комментарии <!--...-->. Ненужные теги удаляются клавишей <Del>.
4.4 Каскадные таблицы стилей
CSS - Cascading Style Sheets.
Dreamweaver поддерживает свойства CSS восьми категорий: шрифт (font), фон (background), абзац (block), рамка (border), размер и размещение (box), список (list), место (positioning) и дополнения (extensions).
Атрибуты стилей опубликованы в окне Window.Reference в списках O'REILLY CSS REFERENCE и Style. Стандарт CSS определяет три способа задания стилей:
- внешняя, или привязанная, таблица стилей сохраняется в файле .css и привязывается к странице тегом <LINK> ;
- внутренняя, или внедренная, таблица стилей располагается в секции заголовка страницы внутри парного тега <STYLE> ;
- встроенный, или внедренный, стиль внутри нужного тега с параметром style , например, <P STYLE="font-size: smaller; font-style: italic">123</P>
Работа со стилями ведется в окне Window.CSS Styles. Новые стили создаются здесь из меню или кнопкой New. Можно
- создать новый стилевой класс, например .Tags {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #9900CC;
}
- переопределить стиль тега, например: h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
text-indent: 10pt;
color: #006600;
}
- создать стиль-селектор или комбинированный стиль на базе нескольких стилей, например, h1 I {
color: #006600; }
Порядок переопределения стиля тега:
-
под кнопкой New выбрать переключатель Tag, пункт Р в списке Tag и переключатель New Style Sheet File и сохранить в файле;
- задать его свойства;
-
если это класс, то применить к выделенному фрагменту текста (Apply в контекстном меню окна CSS Styles или Style в панели Properties). Если тег, то вступает в силу автоматически.
При определении стиля шрифта (Type) задается его размер (Size) в пикселах (pixels), пунктах (points), дюймах (in), см (cm), мм (mm), пиках (picas), размерах буквы m (ems), или x (exs) или в процентах от размера шрифта родителя (%). Свойство Weight определяет жирность, Style - курсив, Variant - вид малых букв, Line height - высоту, Case - регистр, Decoration - под-/над-/зачеркивание.
Параметры фона (Background): Repeat: repeat - повторять по горизонтали и вертикали, no-repeat - только слева вверху окна, repat-x - повторять по горизонтали, repeat-y - повторять по вертикали; Attachment - прокрутка фона вместе с содержимым окна; Position - координаты фона в окне.
Парaметры абзаца (Block): Word spacing - дополнительное расстояние между словами, Letter spacing - между буквами, Vertical alignment - вертикальное выравнивание, Text align - горизонтальное выравнивание, Text indent - отступ красной строки, Whitespace - пробелы внутри абзаца, Display - формат элемента страницы (отсутствует, встроенный символ, абзац, пункт списка, абзац или его начало, маркер, таблица или ее фрагмент). Параметр Verical alinment может принимать значения:
- baseline - по умолчанию,
- sub - нижний индекс,
- super - верхний индекс,
- top - элемент по верхнему краю основного текста,
- text-top - верхний край элемента по верхнему краю основного текста,
- middle - середина элемента на половине высоты основного текста,
- bottom - элемент по нижнему краю основного текста,
- text-bottom - нижний край элемента по нижнему краю основного текста.
В категории Box определяется положение объекта на странице (Float) относительно текста - абсолютное или относительное - слева, справа или в потоке - и ориентация относительно соседнего "освобожденного" элемента (Clear). Здесь же задается расстояние элементов страницы от текста (Padding) и расстояние между соседними элементами (Margin). Флажок Same for all устанавливает равные интервалы.
Border - параметры рамки, в том числе вдавленная (groove), выпуклая (riddle), освещенная вдавленная (insert), освещенная выпуклая (outset).
List - маркеры списка, а Extensions - дополнительные параметры (печать, курсор, фильтр).
Управление таблицами стилей ведется в окне Manage Styles, открываемом в списке Style панели Properties. Здесь, а также в контекстном меню окна CSS Styles выполняется команда Attach External Style Sheet, указывающая, какой файл стиля подключить к странице. Отсюда же можно выйти в редактор стилей или создать недостающий стиль.
Встроенные стили переопределяются в окне Tag Editor, доступном из контекстного меню при выделенном стиле .
Пример стиля mySty, определенного в этом файле.
Используются технологии
uCoz
5