Презентация на тему Язык разметки гипертекста

Язык разметки гипертекста

Структура Web-страницы
История появления языка
Структура Web-страницы.
Терминология HTML.
Основные конструкции языка.

Структура Web-страницы

Признаки первоклассных узлов
Богатое информационное содержание
Художественный дизайн мирового уровня.
Часто обновляемое содержание.
Интерактивность.
Помощь и поддержка.

Необходимые услуги при выборе провайдера

Пропускная способность каналов.
Поддержка сервером провайдера SSI (Server Side Includes)
Поддержка сервером провайдера CGI-сценариев (Common Gateway Interface)
Поддержка моментальной перекодировки.

История создания HTML (Hyper Text Markup Language – язык разметки гипертекста)

Некоторые даты:

1945 год: американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста.

1968 год: Дуглас Энджельбарт (создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.

1960-е годы: сотрудники компании IBM создали язык GML
(General Markup Language - общий язык разметки
печатных документов),
в дальнейшем был расширен,
в 80-х годах прошёл стандартизацию ISO,
получил название SGML
(Standart General Markup Langugage).

SGML широкого распространения не получил
ввиду своей сложности и дороговизны
реализации.
1969 - Тед Нельсон ввел термин "гипертекст"

1980-е годы: учёный-физик Тим Бернерс-Ли (Швейцария) в
конце 80-х годов разработал язык, в основу
которого положил язык SGML и приёмы
работы с гипертекстом – HTML.

Некоторые даты:

HTML-документ

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

Такие документы обычно имеют расширение HTM, HTML

Терминология

Гипертекст

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

Гиперссылка

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

Терминология

Терминология

Терминология

Группы тегов НТМL

Структурные теги
Физическое форматирование:
* Разметка текста
* Создание списков
* Создание таблиц
* Графика
Логическое форматирование:
* Гиперссылки
* Аббревиатуры и т.д.
Специальные теги (CER)
Формы для организации диалога
Вызов программ

Основные теги HTML можно разделить по их назначению на следующие группы:

Структурные теги

Эту базовую структуру в простейшем виде можно наглядно показать следующим образом:

HTML - документ

Структура гипертекстового документа

Первый абзац документа

………

Последний абзац документа

заголовок

Первый абзац документа

Последний абзац документа

HTML - документ

Программа-браузер

Управляющая часть

Окно просмотра интерпретированного HTML-документа

Заголовок окна

Строка адреса ресурса (URL)

Взаимодействие документа и браузера

Программа-браузер

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- ДОКУМЕНТА
СТРОК ДЛЯ ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ

Основные теги заголовка

HEAD (элемент разметки HEAD);
TITLE (заглавие документа);
BASE (база URL);
LINK (общие ссылки);
META (метаинформация);
STYLE (описатели стилей);
SCRIPT (скрипты).

Теги заголовка документа

TITLE -служит для именования документа в WWW.
Синтаксис :


BASE - служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Синтаксис:


Пример:
...

Теги заголовка документа

LINK - позволяет загружать внешние описатели стилей.

Синтаксис:

Пример:


STYLE - предназначен для размещения описателей стилей внутри документа.

Синтаксис:

Теги заголовка документа

SCRIPT служит для размещения кода программы на JavaScript, VBScript или JScript.

Синтаксис в общем виде:
]

Пример: