Презентация, доклад к уроку Язык разметки гипертекста

Содержание

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

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

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

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


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

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

HTMLHyperText 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

История 1969- Чарльз Гольдфарб создает прототип языка для разметки технической документации GML1986определен стандарт SGML(Standard Generalized Markup Language)1989-

Слайд 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 - ширина в пикселах или процентах от

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

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

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

документы обычно имеют расширение HTM, HTML.

HTML-код

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

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

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



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

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

файл.

Терминология

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

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

в общем виде:

протокол://имяСервера.имяДомена/путь

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

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



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

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

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

Слайд 30

Заголовок


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

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


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

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

Заголовок окна

Строка адреса ресурса (URL)

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

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

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



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

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

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

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



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

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

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

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



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

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

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

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



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

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

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

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



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

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

Программа-браузерHTML - документЗаголовокПервый абзац документа………Последний абзац документаURL: 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-КОДА

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

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

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

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

Основные

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

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


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

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

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



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

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

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









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

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




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

Слайд 51Организация гиперссылки


Текст ссылки






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

сылкой:





<А HREF=“http://www.aport.ru”>Поисковая система Аппорт


Поисковая система Аппорт

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

Похожие презентации

Презентация по информатике Информатика әлеміне саяхат Презентация по информатике Информатика әлеміне саяхат 398
Презентация по информатике на тему Объект и его свойства Презентация по информатике на тему Объект и его свойства 103
“Мультимедиялық презентациялардың конструкторы” 6-сынып “Мультимедиялық презентациялардың конструкторы” 6-сынып 193
Презентация по информатике на тему Кодирование информации (5 класс) Презентация по информатике на тему Кодирование информации (5 класс) 113
Презентация по информатике Графикалық режим 8 сынып Презентация по информатике Графикалық режим 8 сынып 162
Связь между алгеброй логики и двоичной системой счисления Связь между алгеброй логики и двоичной системой счисления 165

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.

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

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

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

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