Основы HTML Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Пример записи для форматирования: Заголовки Запись элемента в общем виде: Пример: Использование атрибута align: align=left Текст располагается справа align=ri презентация

Содержание

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

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

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

Имя файла: Основы-HTML---Заголовок---Заголовок---Заголовок---Заголовок---Заголовок---Заголовок-Заголовок-Пример-записи-для-форматирования:--Заголовки--Запись-элемента-в-общем-виде:-Пример:-Использование-атрибута-align:-align=left--Текст-располагается-справа-align=ri.pptx
Количество просмотров: 18
Количество скачиваний: 0