Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Документ HTML

Содержание

План занятияИстория НТМLТерминология2. Основы форматирования HTML-документа.3. Изображения в HTML-документах.4. Организация гиперссылки.
Язык разметки гипертекстаТерминология HTML. Методика использования. Основные конструкции.Московский Центр Интернет-образования Преподаватель Шапиро К. В. План занятияИстория НТМLТерминология2. Основы форматирования HTML-документа.3. Изображения в HTML-документах.4. Организация гиперссылки. HTMLHyperText Markup Language- язык разметки гипертекста Гипертекст- специальным образом организованный текст, позволяющий пользователю осуществлять по указателям мгновенный переход к связанным ресурсам. Терминология История 1969- Чарльз Гольдфарб создает прототип языка для разметки технической документации GML1986определен ТерминологияЭлемент- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Терминология- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данныхЭлементы Тег- единица разметки, стартовый или конечный маркер элемента. Запись стартового тега в ИНТЕРГРАД Атрибут- параметр или свойство элемента. Запись стартового тега с атрибутом в общем Наиболее распространенные атрибутыalign-выравнивание width - ширина в пикселах или процентах от ширины HTML-документ- текстовый документ содержимое которого размечено при помощи элементов языка HTML.Такие документы Вложенность элементов Гиперссылка- объект интерпретируемого документа служащий указателем на другой элемент, документ или файл.Терминология URL – (Universal Resource Locator) универсальный указатель ресурса Например: http://mu-mu.ru/gerasim.htmЗдесь:Запись URL в общем виде:протокол://имяСервера.имяДомена/путь HTML - документСтруктура гипертекстового документаЗаголовокПервый абзац документа………Последний абзац документазаголовок ЗаголовокПервый абзац документаПоследний абзац документа HTML - документПрограмма-браузерУправляющая частьОкно просмотра интерпретированного HTML-документаЗаголовок Программа-браузерHTML - документЗаголовокПервый абзац документа………Последний абзац документаURL: http://mu-mu.ru/gerasim.htm Программа-браузерHTML - документЗаголовокПервый абзац документа………Последний абзац документаURL: http://mu-mu.ru/gerasim.htm Программа-браузерHTML - документЗаголовокПервый абзац документа………Последний абзац документаURL: http://mu-mu.ru/gerasim.htm Программа-браузерHTML - документЗаголовокПервый абзац документа………Последний абзац документаURL: http://mu-mu.ru/gerasim.htm Программа-браузер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Разметка текста Создание списков Создание таблиц Графика Гиперссылки Основные элементы Разметка текстаПримеры логической разметкиПримеры визуальной разметки Заголовки ЗаголовокПример записи для форматирования: Вставка картинкиЗапись элемента в общем виде:Пример:Использование атрибута align: Организация гиперссылкиТекст ссылкиЗапись элемента в общем виде:Пример:Внешний вид документа с сылкой:Поисковая система АппортПоисковая система Аппорт
Слайды презентации

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

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

HTML-документах.
4. Организация гиперссылки.


Слайд 3 HTML
HyperText Markup Language
- язык разметки гипертекста

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

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

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

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


Слайд 5 История
1969
- Чарльз Гольдфарб создает прототип языка для

История 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 предписывающая способ интерпретации

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


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

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

помещенных внутри нее данных
Элементы могут вкладываться один в другой

подобно матрешкам

Элемент


Слайд 21 Тег
- единица разметки, стартовый или конечный маркер элемента.

Тег- единица разметки, стартовый или конечный маркер элемента. Запись стартового тега


Запись стартового тега в общем виде:

ИНТЕРГРАД
Запись конечного тега в

общем виде:


Теги определяют границы действия элементов.


Слайд 22
ИНТЕРГРАД

ИНТЕРГРАД

Слайд 23 Атрибут
- параметр или свойство элемента.
Запись стартового тега

Атрибут- параметр или свойство элемента. Запись стартового тега с атрибутом в

с атрибутом в общем виде:

Все атрибуты записываются внутри

стартового тега.

Запись атрибута в общем виде:

имяАтрибута="значение"

Атрибуты внутри стартового тега разделяются пробелами.


Слайд 24 Наиболее распространенные атрибуты

align-выравнивание
width - ширина в пикселах

Наиболее распространенные атрибутыalign-выравнивание width - ширина в пикселах или процентах от

или процентах от ширины окна браузера
height - высота

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


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

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

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

совокупность всех элементов языка HTML использованных для разметки документа.

Слайд 26 Вложенность элементов



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

Слайд 27 Гиперссылка
- объект интерпретируемого документа служащий указателем на другой

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

элемент, документ или файл.
Терминология


Слайд 28 URL – (Universal Resource Locator) универсальный указатель ресурса

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


Например: http://mu-mu.ru/gerasim.htm
Здесь:
Запись URL в общем виде:
протокол://имяСервера.имяДомена/путь


Слайд 29
HTML - документ



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

………
Последний

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

абзац документа
заголовок


Слайд 30

Заголовок


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

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


HTML -

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

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

документа и браузера

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



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

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

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

http://mu-mu.ru/gerasim.htm


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



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

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

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

http://mu-mu.ru/gerasim.htm


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



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

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

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

http://mu-mu.ru/gerasim.htm


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



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

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

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

http://mu-mu.ru/gerasim.htm


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



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

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

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

http://mu-mu.ru/gerasim.htm


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



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

………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
ДОКУМЕНТ

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

НАЙДЕН… ЖДИТЕ.


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



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

………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
НАЙДЕНО

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

НАЧАЛО HTML-КОДА


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



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

………
Последний абзац документа
http://mu-mu.ru/gerasim.htm



НАЧАТО

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

ИНТЕРПРЕТИРОВАНИЕ ГОЛОВЫ


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



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

………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
ИНТЕРПРЕТАЦИЯ

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

ЗАГОЛОВКА

Заголовок


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



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

………
Последний абзац документа
http://mu-mu.ru/gerasim.htm
ГОЛОВА

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

ПРОИНТЕРПРЕТИРОВАНА

Заголовок


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



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

………
Последний абзац документа
http://mu-mu.ru/gerasim.htm

Заголовок

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



НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ ДОКУМЕНТА
ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА


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



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

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

http://mu-mu.ru/gerasim.htm
Заголовок

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



ИНТЕРПРЕТИРУЕТСЯ ТЕКСТ
Первый абзац документа


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



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

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

http://mu-mu.ru/gerasim.htm
Заголовок

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



ИНТЕРПРЕТИРУЕТСЯ КАРТИНКА
Первый абзац документа


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



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

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

http://mu-mu.ru/gerasim.htm
Заголовок

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



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


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



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

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

http://mu-mu.ru/gerasim.htm
Заголовок

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



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

ОКНЕ БРАУЗЕРА

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



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

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

http://mu-mu.ru/gerasim.htm
Заголовок

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



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

ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ

Слайд 47 Основные элементы HTML

Разметка текста
Создание списков
Создание таблиц

Основные элементы HTMLРазметка текста Создание списков Создание таблиц Графика Гиперссылки Основные


Графика
Гиперссылки

Основные элементы HTML можно разделить по их

назначению на следующие группы:

Слайд 48 Разметка текста


Примеры логической разметки
Примеры визуальной разметки

Разметка текстаПримеры логической разметкиПримеры визуальной разметки

Слайд 49 Заголовки



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

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

Слайд 50 Вставка картинки









Запись элемента в общем виде:

Пример:
Использование

Вставка картинкиЗапись элемента в общем виде:Пример:Использование атрибута align:

атрибута align:





  • Имя файла: dokument-html.pptx
  • Количество просмотров: 216
  • Количество скачиваний: 0