Transcript Основы Web-технологий
Учебный курс
Введение в HTML и CSS
Лекция 3
Основы HTML
кандидат технических наук
Павел Брониславович Храмцов
[email protected]
1
HTML: В чем прелесть?
Разработчики HTML смогли решить две задачи:
• предоставить дизайнерам гипертекстовых баз данных простое средство создания документов; • сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных. 2
HTML: возможности
Язык НТМL :
•
позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления;
•
результирующий документ может содержать самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее.
•
В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.
3
HTML: простое решение
Вид HTML-файла: Обычный текстовый файл. Такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде какой угодно операционной системы; Посети можно передавать в соответствии с RFC 822 текстовые файлы LATIN1. К моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.
4
HTML: Версии
HTML 1.0 Первая версия языка была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер.
HTML 2.0 Вторая версия языка фиксировала практику использования его конструкций.
HTML++ текста. представляла новые возможности, расширяя набор тегов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и HTML 3.2 смогла упорядочить все нововведения и согласовать их с существующей практикой. Она позволяет реализовать использование таблиц, выполнение кодов языка Java, обтекание графики текстом, а также отображение верхних и нижних индексов.
5
HTML: Версии
HTML 4.0 кроме возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей, уже существовавших в предыдущих версиях HTML, в версию 4.01 включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов. HTML 5.0 – сведение вместе разметки, стилей отображения, программирования и объектной модели документов.
XHTML 1.0 миграция с HTML 4.0 в формат XML.
6
HTML: Принцип теговой разметки
HTML является
описательным
языком разметки документов, в нем используются указатели разметки (теги). Тег – это конструкция вида: элементов разметки.
“<“ нечто “>”
Весь HTML-документ представляет из себя вложенный набор Элемент разметки (контейнер) – это: • полный элемент разметки; • неполный элемент разметки; • Символьный примитив (Character Entity Reference) 7
HTML: Элементы разметки
Полный элемент разметки: <
«имя элемента» [«атрибуты элемента»] «содержание элемента» «имя элемента>
>
Примеры:
Это заголовок
8HTML: элементы разметки Неполный элемент разметки: <
«имя элемента» [«атрибуты элемента»]
> Примеры:
9
HTML: элементы разметки Символьные примитивы:
10
Структура HTML-документа Условно все HTML документы можно разбить на:
•
Простые документы(классические, плоские);
•
Документы, состоящие из фреймов;
•
Документы, состоящие из слоев.
11
Структура HTML-документа Простой документ:
Пример простого документа
Формы HTML-документов
- Классическая
- Фреймовая
12
Структура HTML-документа Документ с фреймами:
Структура HTML-документа Документ со слоями:
KUKU
KUKU
14HTML: Элеметы заголовка документа
• • • • • • • • HEAD (элемент разметки HEAD) TITLE (заглавие документа) BASE (база URL) ISINDEX (поисковый шаблон) META (метаинформация) LINK (общие ссылки) STYLE (описатели стилей) SCRIPT (скрипты) 15
HTML: HEAD
контейнеры заголовка
Необязательный атрибут тагов. В качестве значения этого атрибута указывается URL этого файла.
profile
указывает на внешний файл мета 16
HTML: HEAD: TITLE
17
HTML: HEAD: BASE
Общепринятым стилем разметки гипертекстовых ссылок является разметка в частичнозаданных(относительных) адресах, когда URL задается относительно текущего местоположения документа. ...
HTML: HEAD: ISINDEX
Задание шаблона поиска. Формат:
HTML: HEAD: META
Управление документом: 20
HTML: HEAD: META
Управление документом и его индексирование поисковыми машинами:
21
HTML: HEAD: LINK и STYLE
Общие связи:
Загрузка стилей из внешнего файла:
Описание стилей документа:
22
HTML: HEAD: SCRIPT
Определение внешних объектов, свойств и объектов страницы до момента разбора тела документа:
Пример:
23