755146
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 1.410 руб.;
- курсы повышения квалификации от 430 руб.
Московские документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ ДО 90%

ВНИМАНИЕ: Скидка действует ТОЛЬКО до конца апреля!

(Лицензия на осуществление образовательной деятельности №038767 выдана ООО "Столичный учебный центр", г.Москва)

ИнфоурокИнформатикаПрезентацииПрезентация к уроку "Язык разметки гипертекста"

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

библиотека
материалов
Язык разметки гипертекста Терминология HTML. Методика использования. Основные...
План занятия История НТМL Терминология 2. Основы форматирования HTML-документ...
HTML HyperText Markup Language - язык разметки гипертекста
Гипертекст - специальным образом организованный текст, позволяющий пользовате...
История 1969 - Чарльз Гольдфарб создает прототип языка для разметки техническ...
Терминология Элемент - это конструкция языка HTML предписывающая способ интер...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Терминология - это конструкция языка HTML предписывающая способ интерпретации...
Тег - единица разметки, стартовый или конечный маркер элемента. Запись старто...
ИНТЕРГРАД
Атрибут - параметр или свойство элемента. Запись стартового тега с атрибутом...
Наиболее распространенные атрибуты align-выравнивание width - ширина в пиксел...
HTML-документ - текстовый документ содержимое которого размечено при помощи э...
Вложенность элементов
Гиперссылка - объект интерпретируемого документа служащий указателем на друго...
URL – (Universal Resource Locator) универсальный указатель ресурса Например:...
HTML - документ   Структура гипертекстового документа Заголовок Первый абзац...
Заголовок   Первый абзац документа  Последний абзац документа   HTML - доку...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Программа-браузер HTML - документ   Заголовок Первый абзац документа  ……… Пос...
Основные элементы HTML Разметка текста Создание списков Создание таблиц Графи...
Разметка текста Примеры логической разметки Примеры визуальной разметки
Заголовки Заголовок Пример записи для форматирования:
Вставка картинки  Запись элемента в общем виде:  Пример: Использование атрибу...
Организация гиперссылки Текст ссылки Запись элемента в общем виде: Пример: Вн...

Описание презентации по отдельным слайдам:

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

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

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

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

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

HTML HyperText 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. Такие документы обычно имеют расширение HTM, HTML. HTML-код - совокупность всех элементов языка HTML использованных для разметки документа.

26 слайд Вложенность элементов
Описание слайда:

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

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

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

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

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

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

HTML - документ <HTML> </HTML> Структура гипертекстового документа <TITLE>Заголовок</TITLE> Первый абзац документа <IMG SRC=“PIC1.GIF”> ……… Последний абзац документа заголовок

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

<HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> Первый абзац документа <IMG SRC=“PIC1.GIF”> Последний абзац документа </BODY> </HTML> HTML - документ Программа-браузер Управляющая часть Окно просмотра интерпретированного HTML-документа Заголовок окна Строка адреса ресурса (URL) Взаимодействие документа и браузера

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

Программа-браузер HTML - документ <HTML> </HTML> <TITLE>Заголовок</TITLE> Первый абзац документа <IMG SRC=“PIC1.GIF”> ……… Последний абзац документа URL: http://mu-mu.ru/gerasim.htm

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

Программа-браузер HTML - документ <HTML> </HTML> <TITLE>Заголовок</TITLE> Первый абзац документа <IMG SRC=“PIC1.GIF”> ……… Последний абзац документа URL: http://mu-mu.ru/gerasim.htm

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

Программа-браузер HTML - документ <HTML> </HTML> <TITLE>Заголовок</TITLE> Первый абзац документа <IMG SRC=“PIC1.GIF”> ……… Последний абзац документа URL: http://mu-mu.ru/gerasim.htm

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

Программа-браузер HTML - документ <HTML> </HTML> <TITLE>Заголовок</TITLE> Первый абзац документа <IMG SRC=“PIC1.GIF”> ……… Последний абзац документа URL: http://mu-mu.ru/gerasim.htm

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

Программа-браузер HTML - документ <HTML> </HTML> <TITLE>Заголовок</TITLE> Первый абзац документа <IMG SRC=“PIC1.GIF”> ……… Последний абзац документа URL: http://mu-mu.ru/gerasim.htm

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вставка картинки <IMG SRC=“ИмяФайла”> Запись элемента в общем виде: <IMG SRC=“leo1.gif”> Пример: Использование атрибута align:

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

Организация гиперссылки <А HREF=“Адрес”>Текст ссылки</A> Запись элемента в общем виде: Пример: Внешний вид документа с сылкой: <А HREF=“http://www.aport.ru”>Поисковая система Аппорт</A> Поисковая система Аппорт

Общая информация

Номер материала: ДВ-413906

Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Основы создания интерактивного урока: от презентации до видеоурока»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс «Оператор персонального компьютера»
Курс «1С: Предприятие 7.7»
Курс «3D Studio MAX»
Курс «WEB-ВЕРСТКА (HTML, CSS)»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышение квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

Грамота за высокий профессионализм, проявленный в процессе создания и развития собственного учительского сайта в рамках проекта "Инфоурок"

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.