Язык разметки гипертекста. Терминология HTML. Методика использования. Основные конструкции. Лаборатория информатизации образования ИДППО Институт дополнительного профессионально-педагогического образования
HTML HyperText Markup Language -язык разметки гипертекста, является общепринятым языком Всемирной паутины. HTML представляет собой простой набор команд, интерпретируемый броузером при загрузке документа и перед показом его пользователю. HTML является языком форматирования (разметки), который использует набор команд, называемых тегами, управляющих броузером при отображении Web-страницы.
Гипертекст - специальным образом организованный текст, позволяющий пользователю осуществлять по указателям мгновенный переход к связанным ресурсам. Терминология
История Чарльз Гольдфарб создает прототип языка для разметки технической документации GML определен стандарт SGML (Standard Generalized Markup Language) Тим Бернерс-Ли разработал систему разметки гипертекстовых документов HTML разработан стандарт HTML создан консорциум W разработаны стандарты HTML 3.2 и HTML разработан стандарт HTML 2.0
Терминология Элемент - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Терминология - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент
Тег - единица разметки, стартовый или конечный маркер элемента. Запись стартового тега в общем виде: ИНТЕРГРАД Запись конечного тега в общем виде: Теги определяют границы действия элементов.
ИНТЕРГРАД
Атрибут - параметр или свойство элемента. Запись стартового тега с атрибутом в общем виде: Все атрибуты записываются внутри стартового тега. Запись атрибута в общем виде: имяАтрибута="значение" Атрибуты внутри стартового тега разделяются пробелами.
Наиболее распространенные атрибуты 1.Align - выравнивание 2.width - ширина в пикселах или процентах от ширины окна браузера 3.height - высота в пикселах или процентах от ширины окна браузера 4.color - Указывает цвет в формате RGB или стандартный цвет.
HTML-документ - текстовый документ содержимое которого размечено при помощи элементов языка HTML. Такие документы обычно имеют расширение HTM, HTML. HTML-код - совокупность всех элементов языка HTML использованных для разметки документа.
Вложенность элементов 50 80
Гиперссылка - выделенная область в HTML- документе, щелчок мышью на которой позволяет осуществить переход к фрагменту в том же документе или другому документу. Терминология
URL – (Universal Resource Locator) универсальный указатель ресурса Например: Здесь: протокол доменное имя сервера путь к файлу на сервере Запись URL в общем виде: протокол://имяСервера.имяДомена/путь
HTML - документ Структура гипертекстового документа Заголовок Первый абзац документа ……… Последний абзац документа заголовок
Заголовок Первый абзац документа Последний абзац документа HTML - документПрограмма-браузер Управляющая часть Окно просмотра интерпретированного HTML-документа Заголовок окна Строка адреса ресурса (URL) Взаимодействие документа и браузера
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа URL:
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа URL:
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа URL:
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа URL:
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа URL:
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа ДОКУМЕНТ НАЙДЕН… ЖДИТЕ.
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа НАЙДЕНО НАЧАЛО HTML-КОДА
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ГОЛОВЫ
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа ИНТЕРПРЕТАЦИЯ ЗАГОЛОВКА Заголовок
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа ГОЛОВА ПРОИНТЕРПРЕТИРОВАНА Заголовок
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ ДОКУМЕНТА ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок ИНТЕРПРЕТИРУЕТСЯ ТЕКСТ Первый абзац документа
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок ИНТЕРПРЕТИРУЕТСЯ КАРТИНКА Первый абзац документа
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок Первый абзац документа ИНТЕРПРЕТИРУЕТСЯ …ТЕКСТ ……… Последний абзац документа
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок Первый абзац документа ……… Последний абзац документа ЗАКОНЧЕНО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ ДОКУМЕНТА ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА
Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок Первый абзац документа ……… Последний абзац документа ДОСТИГНУТА ГРАНИЦА HTML- ДОКУМЕНТА СТРОК ДЛЯ ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ
Основные элементы HTML Разметка текста Создание списков Создание таблиц Графика Гиперссылки Основные элементы HTML можно разделить по их назначению на следующие группы:
Тэги HTML Тэги для задания структуры HTML- документа … Между этими тэгами должен быть заключён весь HTML-документ … Между этой парой тэгов располагается заголовочная часть HTML-документ … Между этой парой тэгов располагается тело HTML- документ – его содержательная часть
Тэги HTML Допустимые атрибуты BACKGROUND=..Служит для указания имени файла (изображения) используемого броузером в качестве фона HTML- документ BGCOLOR=…Цвет фона HTML-документ TEXT=…Цвет основного текста LINK=…Цвет не просмотренных гиперссылок
Тэги HTML Допустимые атрибуты ALINK=…Цвет активной гиперссылки VLINK=…Цвет просмотренной гиперссылки
Тэги HTML Заголовки … Заголовок первого уровня … Заголовок второго уровня … Заголовок третьего уровня … Заголовок четвёртого уровня … Заголовок пятого уровня … Заголовок шестого уровня … Имя документа, отображаемое броузером, должно быть размещено в заголовочной части документа
Тэги HTML Абзацы … Выделяет абзац текста Гиперссылки … С атрибутом HREF служит для задания гиперссылки на документ Списки … Нумерованный список … Маркированный список
Тэги HTML Управление отображением символов … Выделение полужирным … Выделение курсивом … Предварительно форматированный текст Другие элементы … Горизонтальная линия … Принудительный переход на следующую строку … Не допускает автоматического переноса текста, заключённого между тэгами, на правой границе страницы
Тэги HTML Другие элементы … Выравнивание текста или изображения, заключённого данными тэгами по центру страницы … Позволяет изменять атрибуты шрифта, используемого для отображения текста, заключённого между данными тэгами Вставка изображения
Тэги HTML Формы … Задаёт форму для ввода пользователем данных … Элемент ввода формы … Создаёт меню или прокручиваемы список, из которого осуществляется выбор
Тэги HTML Таблицы … Создаётся таблица … Задание строки таблицы … Определяет ячейку таблицы Допустимые атрибуты BORDER=…Указывает, будет ли отображаться рамка. CELLSPACING=…Расстояние между ячейками в таблице CELLPADING=…Расстояние между рамкой ячейки и её содержимым WIDTH=…Ширина таблицы либо в пикселах, либо в % по отношению к ширине странице
Тэги HTML Бегущая строка … Служит для отображения бегущей строки
Вставка картинки Запись элемента в общем виде: Пример: Использование атрибута align: align=left Текст располагается справа align=rightТекст располагается слева align=bottom align=top по нижней границе строки по верхней границе строки