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

Язык разметки
гипертекста
Терминология HTML.
Методика использования.
Основные конструкции
HTML
HyperText Markup Language
-язык разметки гипертекста, является общепринятым
языком Всемирной паутины.
HTML представляет собой простой набор команд,
интерпретируемый броузером при загрузке документа
и перед показом его пользователю.
HTML является языком форматирования (разметки),
который использует набор команд, называемых
тегами, управляющих броузером при отображении
Web-страницы.
Терминология
Гипертекст - специальным образом организованный
текст, позволяющий пользователю
осуществлять по указателям мгновенный
переход к связанным ресурсам.
История
1969
- Чарльз Гольдфарб создает прототип языка для
разметки технической документации GML
1986
-определен стандарт SGML
(Standard Generalized Markup Language)
1989
- Тим Бернерс-Ли разработал систему разметки
гипертекстовых документов HTML
1993
1994
- разработан стандарт HTML 1.2
- создан консорциум W3
1995
- разработан стандарт HTML 2.0
1997
- разработаны стандарты HTML 3.2 и HTML 4.0
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Терминология
Элемент - это конструкция языка HTML
предписывающая способ интерпретации
помещенных внутри нее данных
Элементы могут вкладываться один в другой подобно матрешкам
Тег - единица разметки, стартовый или
конечный маркер элемента.
Запись стартового тега в общем виде: <тег>
ИНТЕРГРАД
Запись конечного тега в общем виде:
</тег>
ИНТЕРГРАД
Теги определяют границы действия элементов.
ИНТЕРГРАД
ИНТЕРГРАД
Атрибут - параметр или свойство элемента.
Запись атрибута в общем виде:
имяАтрибута="значение"
Все атрибуты записываются внутри стартового тега.
Запись стартового тега с атрибутом в общем виде:
<тег имяАтрибута="значение">
Атрибуты внутри стартового тега разделяются
пробелами.
Наиболее распространенные
атрибуты
1. Align - выравнивание
2. width - ширина в пикселах или процентах
от ширины окна браузера
3. height - высота в пикселах или процентах
от ширины окна браузера
4. color - Указывает цвет в формате RGB или
стандартный цвет.
HTML-документ
- текстовый документ
содержимое которого
размечено при помощи
элементов языка HTML.
Такие документы обычно имеют расширение
HTM, HTML.
HTML-код - совокупность всех элементов
языка HTML использованных
для разметки документа.
Вложенность элементов
80
<тег1>
50
50
<тег2>
</тег2>
80
</тег1>
Терминология
Гиперссылка
- выделенная область в HTML-
документе, щелчок мышью на
которой позволяет осуществить
переход к фрагменту в том же
документе или другому документу.
URL – (Universal Resource Locator)
универсальный указатель ресурса
Запись URL в общем виде:
протокол://имяСервера.имяДомена/путь
Например: http://mu-mu.ru/gerasim.htm
Здесь:
протокол
доменное имя сервера
путь к файлу на сервере
Структура гипертекстового документа
HTML - документ
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
заголовок
Взаимодействие документа и
браузера
HTML - документ
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
Последний абзац документа
</BODY>
</HTML>
Программа-браузер
Заголовок окна
Управляющая часть
Строка адреса ресурса (URL)
Окно просмотра
интерпретированного
HTML-документа
HTML - документ
URL: http://mu-mu.ru/gerasim.htm
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
Программа-браузер
HTML - документ
URL: http://mu-mu.ru/gerasim.htm
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
Программа-браузер
HTML - документ
Программа-браузер
URL: http://mu-mu.ru/gerasim.htm
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
HTML - документ
Программа-браузер
<HTML>
URL: http://mu-mu.ru/gerasim.htm
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
HTML - документ
Программа-браузер
<HTML>
<HEAD>
URL: http://mu-mu.ru/gerasim.htm
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
HTML - документ
Программа-браузер
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
ДОКУМЕНТ НАЙДЕН… ЖДИТЕ.
HTML - документ
Программа-браузер
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
НАЙДЕНО НАЧАЛО HTML-КОДА
HTML - документ
Программа-браузер
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ГОЛОВЫ
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
ИНТЕРПРЕТАЦИЯ ЗАГОЛОВКА
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
ГОЛОВА ПРОИНТЕРПРЕТИРОВАНА
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ
ДОКУМЕНТА
ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
ИНТЕРПРЕТИРУЕТСЯ ТЕКСТ
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
</BODY>
</HTML>
ИНТЕРПРЕТИРУЕТСЯ КАРТИНКА
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
………
</BODY>
Последний абзац документа
</HTML>
ИНТЕРПРЕТИРУЕТСЯ …ТЕКСТ
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
http://mu-mu.ru/gerasim.htm
<BODY>
Первый абзац документа
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
………
</BODY>
Последний абзац документа
</HTML>
ЗАКОНЧЕНО ИНТЕРПРЕТИРОВАНИЕ
ЧАСТИ ДОКУМЕНТА
ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА
HTML - документ
Программа-браузер
<HTML>
Заголовок
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
Первый абзац документа
http://mu-mu.ru/gerasim.htm
Первый абзац документа
<IMG SRC=“PIC1.GIF”>
………
Последний абзац документа
………
</BODY>
Последний абзац документа
</HTML>
ДОСТИГНУТА ГРАНИЦА HTML- ДОКУМЕНТА
СТРОК ДЛЯ ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ
Основные элементы HTML
Основные элементы HTML можно разделить по их
назначению на следующие группы:
•Разметка текста
•Создание списков
•Создание таблиц
•Графика
•Гиперссылки
Тэги HTML
Тэги для задания структуры HTMLдокумента
<HTML>…</HTML>
<HEAD>…</HEAD>
<BODY>…</BODY>
Между этими тэгами
должен быть заключён весь
HTML-документ
Между этой парой тэгов
располагается заголовочная
часть HTML-документ
Между этой парой тэгов
располагается тело HTMLдокумент – его
содержательная часть
Тэги HTML
Допустимые атрибуты
BACKGROUND=“..”
BGCOLOR=“…”
Служит для указания имени
файла (изображения)
используемого броузером в
качестве фона HTMLдокумент
Цвет фона HTML-документ
TEXT=“…”
Цвет основного текста
LINK=“…”
Цвет не просмотренных
гиперссылок
Тэги HTML
Допустимые атрибуты
ALINK=“…”
Цвет активной гиперссылки
VLINK=“…”
Цвет просмотренной
гиперссылки
Тэги HTML
Заголовки
<H1>…</H1>
Заголовок первого уровня
<H2>…</H2>
Заголовок второго уровня
<H3>…</H3>
<H4>…</H4>
Заголовок третьего уровня
Заголовок четвёртого
уровня
<H5>…</H5>
Заголовок пятого уровня
<H6>…</H6>
Заголовок шестого уровня
<TITLE>…</TITLE>
Имя документа,
отображаемое броузером,
должно быть размещено в
заголовочной части
документа
Тэги HTML
Абзацы
<P>…</P>
Выделяет абзац текста
Гиперссылки
<A>…</A>
С атрибутом HREF служит
для задания гиперссылки на
документ
Списки
<OL>…</OL>
Нумерованный список
<UL>…</UL>
Маркированный список
Тэги HTML
Управление отображением символов
<B>…</B>
Выделение полужирным
<I>…</I>
Выделение курсивом
<PRE>…</PRE>
Предварительно
форматированный текст
Другие элементы
<HR>…</HR>
Горизонтальная линия
<BR>…</BR>
Принудительный переход
на следующую строку
<NOBR>…</NOBR>
Не допускает
автоматического переноса
текста, заключённого между
тэгами, на правой границе
страницы
Тэги HTML
Другие элементы
<CENTER>…</ CENTER > Выравнивание текста или
изображения, заключённого
данными тэгами по центру
страницы
<FONT>…</ FONT>
Позволяет изменять
атрибуты шрифта,
используемого для
отображения текста,
заключённого между
данными тэгами
<ING>
Вставка изображения
Тэги HTML
Формы
<FORM>…</ FORM >
Задаёт форму для ввода
пользователем данных
<INPUT>…</ INPUT >
Элемент ввода формы
<SELECT>… </SELECT>
Создаёт меню или
прокручиваемы список, из
которого осуществляется
выбор
Тэги HTML
Таблицы
<TABLE>…</ TABLE >
Создаётся таблица
<TR>…</TR>
Задание строки таблицы
<TD>…</TD>
Определяет ячейку таблицы
Допустимые атрибуты
BORDER=“…”
Указывает, будет ли отображаться
рамка.
CELLSPACING=“…”
Расстояние между ячейками в
таблице
CELLPADING=“…”
Расстояние между рамкой ячейки
и её содержимым
WIDTH=“…”
Ширина таблицы либо в
пикселах, либо в % по
отношению к ширине странице
Тэги HTML
Бегущая строка
<MARQUEE>…</ MARQUEE >
Служит для
отображения бегущей
строки
Вставка картинки
Запись элемента в общем виде: <IMG SRC=“ИмяФайла”>
Пример: <IMG SRC=“leo1.gif”>
Использование атрибута align:
align=left
align=right
align=bottom
align=top
Текст располагается справа
Текст располагается слева
по нижней границе строки
по верхней границе строки