Лекция 4. Тема «Форматирование Web-документа ». Вопросы темы: 1.Теги тела документа; 2.Теги управления разметкой; 3.Теги, управляющие формой отображения; - презентация

1 Лекция 4. Тема «Форматирование Web-документа »

2 Вопросы темы: 1.Теги тела документа; 2.Теги управления разметкой; 3.Теги, управляющие формой отображения; 4.Теги, характеризующие тип информации.

3 Тело документа состоит из: иерархических контейнеров и заставок; заголовков (от Н1 до Н6); блоков (параграфы, списки, формы, таблицы, картинки и т.п.); горизонтальных отчеркиваний и адресов; текста, разбитого на области действия стилей (подчеркивание, выделение, курсив); математических описаний, графики и гипертекстовых ссылок.

4 1.Теги тела документа Теги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа – контейнер ВОDY Тело документа

5 тег ВОDY имеет атрибуты АтрибутЗначение ВGCOLOR=#FFFFFFЦвет фона ТЕХТ=#0000FFЦвет текста VLINK =#FF0000Цвет пройденных гипертекстовых ссылок LINK =#00FF00Цвет гипертекстовой ссылки BАСКGROUNDФоновое изображение (image.gif)

6 Значения цветов НазваниеКод Aqua#00FFFF Navy# Black# Olive# Blue#0000FF Purple# Fuchsia#FF00FF Red#FF0000 Gray#808080

7 Например, цвет фона белый, текст синий, ссылки зеленые, а пройденные ссылки станут красными.

8 Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.

9 2. Теги управления разметкой Заголовки Web-дизайн.chmWeb-дизайн.chm Абзацы Web-дизайн.chmWeb-дизайн.chm

10 Теги управления отображением символов Все эти теги можно разбить на два класса: 1.теги, управляющие формой отображения (font style), 2. теги, характеризующие тип информации (information type).

11 Теги, управляющие формой отображения Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации все это делает страницы более интересными. Web-дизайн.chm txt_fonts.htm

12 Теги, управляющие формой отображения ТегЗначение... Курсив (Italic)... Усиление (Вold)... Телетайп... Подчеркивание... Перечеркнутый текст... Увеличенный размер шрифта... Уменьшенный размер шрифта... Подстрочные символы... Надстрочные символы

13 Теги, характеризующие тип информации ТегЗначение... Типографское усиление... Цитирование... Усиление... Отображает примеры кода (например, "коды программ")... Последовательность литералов... Пример ввода символов с клавиатуры... Переменная... Определение... Текст, заключенный в скобки

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

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

16

17 Создание списков в HTML Виды списков: 1.Нумерованные 2.Ненумерованные 3.Списки определений Web-дизайн.chm

18 Переформатированный вывод тег Применение этого тега позволяет отобразить текст "как есть" (без форматирования), теми же символами и с тем же разбиением на строки. пре.html

19 Комментарии в языке HTML Комментарии HTML начинаются с символа " ".

20 Контрольные вопросы: 1.Перечислите теги тела документа. 2.Назовите атрибуты тега 3.Как записываются значения цветов у различных атрибутов? Приведите пример. 4.Назовите теги управления разметкой. 5.Перечислите теги, управляющие формой отображения 6.Назовите теги, характеризующие тип информации (теги логического форматирования) 7.Какие виды списков поддерживаются браузером? 8.Как создаются различные виды списков? 9.Как записываются комментарии в HTML коде?