Презентация на тему "Основы html" 11 класс

Содержание

• 
  Слайд 1

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

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

• 
  Слайд 2

  План занятия

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

• 
  Слайд 3
  

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

• 
  Слайд 4
  

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

• 
  Слайд 5

  История

  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

• 
  Слайд 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
  

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

• 
  Слайд 21
  

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

• 
  Слайд 22
  

  ИНТЕРГРАД ИНТЕРГРАД

• 
  Слайд 23
  

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

• 
  Слайд 24

  Наиболее распространенные атрибуты

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

• 
  Слайд 25
  

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

• 
  Слайд 26

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

  50 50 80 80 тег2> тег1>

• 
  Слайд 27
  

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

• 
  Слайд 28
  

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

• 
  Слайд 29

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

  HTML - документ

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

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

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Программа-браузер HTML - документ

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

  Основные элементы HTML

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

• 
  Слайд 48

  Разметка текста

  Аббривиатура СПбГТУ Цитата цитата полужирный шрифт Пример курсив Пример Примеры логической разметки Примеры визуальной разметки

• 
  Слайд 49

  Заголовки

  Тег Результат

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

  Вставка картинки

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

  Организация гиперссылки

  Текст ссылки Запись элемента в общем виде: Пример: Внешний вид документа с сылкой: Поисковая система Аппорт Поисковая система Аппорт