Язык разметки гипертекста. Терминология HTML. Методика использования. Основные конструкции. Лаборатория информатизации образования ИДППО Институт дополнительного. - презентация

1 Язык разметки гипертекста. Терминология HTML. Методика использования. Основные конструкции. Лаборатория информатизации образования ИДППО Институт дополнительного профессионально-педагогического образования

2 HTML HyperText Markup Language -язык разметки гипертекста, является общепринятым языком Всемирной паутины. HTML представляет собой простой набор команд, интерпретируемый броузером при загрузке документа и перед показом его пользователю. HTML является языком форматирования (разметки), который использует набор команд, называемых тегами, управляющих броузером при отображении Web-страницы.

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

4 История Чарльз Гольдфарб создает прототип языка для разметки технической документации GML определен стандарт SGML (Standard Generalized Markup Language) Тим Бернерс-Ли разработал систему разметки гипертекстовых документов HTML разработан стандарт HTML создан консорциум W разработаны стандарты HTML 3.2 и HTML разработан стандарт HTML 2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21 ИНТЕРГРАД

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа НАЙДЕНО НАЧАЛО HTML-КОДА

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

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

39 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа ГОЛОВА ПРОИНТЕРПРЕТИРОВАНА Заголовок

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

41 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок ИНТЕРПРЕТИРУЕТСЯ ТЕКСТ Первый абзац документа

42 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок ИНТЕРПРЕТИРУЕТСЯ КАРТИНКА Первый абзац документа

43 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок Первый абзац документа ИНТЕРПРЕТИРУЕТСЯ …ТЕКСТ ……… Последний абзац документа

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

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

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

47 Тэги HTML Тэги для задания структуры HTML- документа … Между этими тэгами должен быть заключён весь HTML-документ … Между этой парой тэгов располагается заголовочная часть HTML-документ … Между этой парой тэгов располагается тело HTML- документ – его содержательная часть

48 Тэги HTML Допустимые атрибуты BACKGROUND=..Служит для указания имени файла (изображения) используемого броузером в качестве фона HTML- документ BGCOLOR=…Цвет фона HTML-документ TEXT=…Цвет основного текста LINK=…Цвет не просмотренных гиперссылок

49 Тэги HTML Допустимые атрибуты ALINK=…Цвет активной гиперссылки VLINK=…Цвет просмотренной гиперссылки

50 Тэги HTML Заголовки … Заголовок первого уровня … Заголовок второго уровня … Заголовок третьего уровня … Заголовок четвёртого уровня … Заголовок пятого уровня … Заголовок шестого уровня … Имя документа, отображаемое броузером, должно быть размещено в заголовочной части документа

51 Тэги HTML Абзацы … Выделяет абзац текста Гиперссылки … С атрибутом HREF служит для задания гиперссылки на документ Списки … Нумерованный список … Маркированный список

52 Тэги HTML Управление отображением символов … Выделение полужирным … Выделение курсивом … Предварительно форматированный текст Другие элементы … Горизонтальная линия … Принудительный переход на следующую строку … Не допускает автоматического переноса текста, заключённого между тэгами, на правой границе страницы

53 Тэги HTML Другие элементы … Выравнивание текста или изображения, заключённого данными тэгами по центру страницы … Позволяет изменять атрибуты шрифта, используемого для отображения текста, заключённого между данными тэгами Вставка изображения

54 Тэги HTML Формы … Задаёт форму для ввода пользователем данных … Элемент ввода формы … Создаёт меню или прокручиваемы список, из которого осуществляется выбор

55 Тэги HTML Таблицы … Создаётся таблица … Задание строки таблицы … Определяет ячейку таблицы Допустимые атрибуты BORDER=…Указывает, будет ли отображаться рамка. CELLSPACING=…Расстояние между ячейками в таблице CELLPADING=…Расстояние между рамкой ячейки и её содержимым WIDTH=…Ширина таблицы либо в пикселах, либо в % по отношению к ширине странице

56 Тэги HTML Бегущая строка … Служит для отображения бегущей строки

57 Вставка картинки Запись элемента в общем виде: Пример: Использование атрибута align: align=left Текст располагается справа align=rightТекст располагается слева align=bottom align=top по нижней границе строки по верхней границе строки