Язык разметки гипертекста. Терминология HTML. Методика использования. Основные конструкции

План занятия
История НТМL
Терминология
Основы форматирования HTML-документа.
Изображения в HTML-документах.
Организация гиперссылки.

HTML
HyperText Markup Language
- язык разметки гипертекста

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

История
1969
- Чарльз Гольдфарб создает прототип языка для разметки технической документации GML
1986
определен стандарт SGML
(Standard Generalized Markup Language)
1989
- Тим Бернерс-Ли разработал систему разметки гипертекстовых документов HTML
1993
- разработан стандарт HTML 1.2
1994
- создан консорциум W3
1997
- разработаны стандарты HTML 3.2 и HTML 4.0
1995
- разработан стандарт HTML 2.0

Терминология
Элемент
- это конструкция языка HTML, предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Терминология
- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Элемент

Тег
- единица разметки, стартовый или конечный маркер элемента.
Запись стартового тега в общем виде:
<тег>
ИНТЕРГРАД
Запись конечного тега в общем виде:
Теги определяют границы действия элементов.

ИНТЕРГРАД

Атрибут
- параметр или свойство элемента.
Запись стартового тега с атрибутом в общем виде:
<тег имяАтрибута="значение">
Все атрибуты записываются внутри стартового тега.
Запись атрибута в общем виде:
имяАтрибута="значение"
Атрибуты внутри стартового тега разделяются пробелами.

Наиболее распространенные атрибуты
Align - выравнивание
width - ширина в пикселах или процентах от ширины окна браузера
height - высота в пикселах или процентах от ширины окна браузера
Color - Указывает цвет в формате RGB или стандартный цвет.

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

Вложенность элементов

Гиперссылка
- объект интерпретируемого документа, служащий указателем на другой элемент, документ или файл.
Терминология

URL – (Universal Resource Locator) универсальный указатель ресурса
Например: http://mu-mu.ru/gerasim.htm
Здесь:
Запись URL в общем виде:
протокол://имяСервера.имяДомена/путь

HTML - документ
Структура гипертекстового документа
Заголовок
Первый абзац документа
………
Последний абзац документа
заголовок

Заголовок
Первый абзац документа
Последний абзац документа
HTML - документ
Программа-браузер
Управляющая часть
Окно просмотра интерпретированного HTML-документа
Заголовок окна
Строка адреса ресурса (URL)
Взаимодействие документа и браузера

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
URL: http://mu-mu.ru/gerasim.htm

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
URL: http://mu-mu.ru/gerasim.htm

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
URL: http://mu-mu.ru/gerasim.htm

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
URL: http://mu-mu.ru/gerasim.htm

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
URL: http://mu-mu.ru/gerasim.htm

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
ДОКУМЕНТ НАЙДЕН… ЖДИТЕ.

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
НАЙДЕНО НАЧАЛО HTML-КОДА

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ГОЛОВЫ

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
ИНТЕРПРЕТАЦИЯ ЗАГОЛОВКА
Заголовок

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
ГОЛОВА ПРОИНТЕРПРЕТИРОВАНА
Заголовок

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
Заголовок
НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ ДОКУМЕНТА
ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
Заголовок
ИНТЕРПРЕТИРУЕТСЯ ТЕКСТ
Первый абзац документа

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
Заголовок
ИНТЕРПРЕТИРУЕТСЯ КАРТИНКА
Первый абзац документа

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
Заголовок
Первый абзац документа
ИНТЕРПРЕТИРУЕТСЯ …ТЕКСТ
………
Последний абзац документа

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
Заголовок
Первый абзац документа
………
Последний абзац документа
ЗАКОНЧЕНО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ ДОКУМЕНТА
ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА

Программа-браузер
HTML - документ
Заголовок
Первый абзац документа
………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
Заголовок
Первый абзац документа
………
Последний абзац документа
ДОСТИГНУТА ГРАНИЦА HTML- ДОКУМЕНТА
СТРОК ДЛЯ ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ

Основные элементы HTML
Разметка текста
Создание списков
Создание таблиц
Графика
Гиперссылки
Основные элементы HTML можно разделить по их назначению на следующие группы:

Разметка текста
Примеры логической разметки
Примеры визуальной разметки

Заголовки
Заголовок
Пример записи для форматирования:

Вставка картинки
Запись элемента в общем виде:
Пример:
Использование атрибута align: