Язык разметки гипертекста Терминология HTML. Основные конструкции языка. Структура Web-страницы. Необходимые услуги при выборе провайдера.

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. Такие документы обычно имеют расширение HTM, HTML Терминология Гипертекст - специальным образом организованный текст, позволяющий пользователю по указателям (гиперссылкам) осуществлять мгновенный переход к связанным ресурсам. Гиперссылка - объект интерпретируемого документа, служащий указателем на другой элемент, документ или файл.

Терминология - это часть HTML - документа, которая специальным способом размечена при помощи конструкций языка HTML, предписывающих способ интерпретации данных Элементы могут вкладываться один в другой подобно матрешкам Элемент (контейнер) контейнер ::= <имя_тега [список_атрибутов]> содержание контейнера

Тег - единица (маркер) разметки, конструкция языка HTML. Различают начальный и конечный маркер элемента. Запись начального тега в общем виде: <тег [атрибуты]> Запись конечного тега в общем виде: Теги определяют границы действия элементов. Терминология Атрибут - параметр или свойство элемента. В общем виде список атрибутов можно определить : список_атрибутов ::= имяАтрибута1 ="значение" [имяАтрибута2 ="значение" ...] Все атрибуты записываются внутри начального тега. Запись атрибута в общем виде: имяАтрибута="значение" Атрибуты внутри начального тега разделяются пробелами.

Структура гипертекстового документа Гипертекстовый документ (контейнер) состоит из двух других вложенных контейнеров: заголовка документа (тег HEAD) тела документа (тег BODY).

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

Группы тегов НТМL Структура документа Разметка текста Создание списков Создание таблиц Графика Гиперссылки Специальные теги (CER) Формы для организации диалога Использование программ Основные теги HTML можно разделить по их назначению на следующие группы:

Теги тела документа Тело документа – контейнер ВОDY Атрибуты тега :

Цвета

Заголовки

Заголовок

Заголовок

Теги управления разметкой текста Теги тела документа Тег

применяется для разделения текста на параграфы Атрибуты, что и в заголовках Тег <ВR> принудительный перевод строки Атрибут СLЕАR. Значения : lеft right аll Тег отображает весь текст в одной строке Тег задает шрифт текста Атрибуты: SIZЕ =n СОLОR=#008080 FACE=“Times New Roman”

Теги управления разметкой текста Теги тела документа Теги, управляющие формой отображения

Теги управления разметкой текста Теги логической разметки Теги тела документа

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

— Неупорядоченные списки
• первый элемент списка
• второй элемент списка
...........................
• n-ый элемент списка
Атрибут TYPE определяет тип маркера. Значения DISK - маркеры такого типа, как в списках первого уровня по умолчанию СIRCLE - маркеры в виде окружностей SQUARE - сплошные квадратные маркеры Создание списков в HTML

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

— Упорядоченные списки Атрибут TYPE определяет тип нумерации элементов списка. Значения 1- Список с нумерацией в формате 1., 2., 3., 4. и т.д. А- Список с нумерацией в формате А., В., С., D. и т.д. a- Список с нумерацией в формате а., b., с., d. и т.д. I- список с нумерацией в формате I., II., III., IV. и т.д. Создание списков в HTML

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

В языке HTML применяется два вида списка:

• неупорядоченные списки;
• упорядоченные списки.

Вставка изображения Атрибут SRC - обязательный. Конечного тега нет. ALT - текст, который будет выводиться вместо изображения Тег IMG. Запись элемента в общем виде: Пример: Атрибут ALIGN определяет положение изображения относительно окружаюшего текста Теги тела документа

Вставка изображения Теги тела документа Тег < IMG > Другие необязательные атрибуты: HSPACE =n - горизонтальное расстояние между вертикальной границей страницы и изображением VSPACE =n - вертикальное расстояние между строками текста и изображением BORDER =n - толщина рамки вокруг изображения WIDTH =n - размер изображения HEIGHT =n

Организация гиперссылки <А HREF=“Адрес”>Текст ссылки Запись элемента в общем виде: Пример: Внешний вид документа со ссылкой: Одной из поисковых систем является система <А HREF=“http://www.aport.ru”> Аппорт Одной из поисковых систем является система Аппорт Теги тела документа Пример использования в качестве гиперссылки рисунка: <А НREF="http://www.animals.ru/fly1.htm">

Средства описания таблиц Теги тела документа Тег <ТABLE> — создание таблицы Тег <ТR> — создание строки таблицы Тег <ТD> — определение ячеек таблицы, задается внутри строки Тег <ТН> — заголовки столбцов таблицы Тег <САРТIОN [ALIGN=значение]> — создание заголовков, ALIGN – определяет размещение (bottom , top)

Средства описания таблиц Теги тела документа Атрибуты: BACKGROUND=URL - задает фоновое изображение BGCOLOR =цвет – цвет фона NOWRAP – текст размещается в одну строку СОLSPAN=n – объединение n смежных ячеек ROWSPAN=n – объединение n смежных строк WIDТH =n - задает ширину объекта ALIGN =значение – выравнивание текста по горизонтали (left, сеnter, right) VALIGN =значение – выравнивание текста по вертикали (top, middle, bottom) BORDER =n – определение рамок таблицы или ячеек СЕLLРАDDING =n – задание полей внутри ячейки СЕLLSPACING =n – задание полей между ячейками

Теги тела документа Пример описания таблицы В таблице приведены значения атрибута ALIGN тега IMG Нижняя граница рисунка располагается по нижней границе строки Верхняя граница рисунка располагается по верхней границе строки

Теги тела документа Пример описания таблицы

CER - элементы (Character Entity Reference)

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

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

Теги заголовка документа LINK - позволяет загружать внешние описатели стилей. Синтаксис: Пример: STYLE - предназначен для размещения описателей стилей внутри документа. Синтаксис: SCRIPT служит для размещения кода программы на JavaScript, VBScript или JScript. Синтаксис в общем виде: ] Пример: