3. 1986
Международная организация по стандартизации приняла стандарт
"Standard Generalized Markup Language (SGML)".
Системы логической, структурной разметки любых разновидностей
текстов.
3
5. HTML
Hyper Text Markup Language
1. HyperText — текст, содержащий узлы перехода между ними
2. Mark—up — это разметка
3. Language — это язык (HTML)
5
6. HTML
HTML — это стандартный язык разметки документов в интернете. Язык
интерпретируется браузерами(не только) и отображается в удобной
для человека форме.
6
7. HTML
• HTML 1.2 — 1993
• HTML 2.0 — 22 сентября 1995 года
• HTML 3.2 — 14 января 1997 года
• HTML 4.0 — 18 декабря 1997 года
• HTML 4.1 — 24 декабря 1999 года
• HTML 5 — … ~ 2014
7
9. XML
XML (eXtensible Markup Language) — расширяемый язык разметки для
хранения структурированных данных.
9
10. XHML
XHTML (Extensible Hypertext Markup Language) — семейство языков
разметки веб-страниц на основе XML, повторяющих и расширяющих
возможности HTML 4.
10
12. W3C
Консорциум Всемирной паутины (англ. World Wide Web Consortium,
W3C) — организация, разрабатывающая и внедряющая
технологические стандарты для Всемирной паутины.
12
13. Задачи W3C
• Разработка для Интернета единых принципов и стандартов
(«Рекомендаций», англ. W3C Recommendations), которые затем
внедряются производителями программ и оборудования.
• Сделать сеть доступной для людей с ограниченными возможностями.
• ...
13
15. Деревня Приветствую тебя, пустынный уголок, приют спокойствия,
трудов и вдохновенья, где льется дней моих невидимый поток на лоне
счастья и забвенья. Я твой — я променял порочный двор Цирцей,
роскошные пиры, забавы, заблужденья на мирный шум дубров, на
тишину полей, на праздность вольную, подругу размышленья.
15
16. Деревня
Приветствую тебя, пустынный уголок,
Приют спокойствия, трудов и вдохновенья,
Где льется дней моих невидимый поток
На лоне счастья и забвенья.
Я твой — я променял порочный двор Цирцей,
Носкошные пиры, забавы, заблужденья
На мирный шум дубров, на тишину полей,
На праздность вольную, подругу размышленья.
16
17. [начало заголовока] Деревня [конец заголовка]
[начало абзаца] Приветствую тебя, пустынный уголок, [перенос]
Приют спокойствия, трудов и вдохновенья, [перенос]
Где льется дней моих невидимый поток [перенос]
На лоне счастья и забвенья. [конец абзаца]
[начало абзаца]Я твой—я променял порочный двор Цирцей, [перенос]
Носкошные пиры, забавы, заблужденья [перенос]
На мирный шум дубров, на тишину полей, [перенос]
На праздность вольную, подругу размышленья. [конец абзаца]
17
18. Тег
Тег — элемент языка разметки, заключенный между символами < и >.
18
20. <h2> Деревня </h2>
<p> Приветствую тебя, пустынный уголок, <br/>
Приют спокойствия, трудов и вдохновенья, <br/>
Где льется дней моих невидимый поток <br/>
На лоне счастья и забвенья. </p>
<p> Я твой — я променял порочный двор Цирцей, <br/>
Носкошные пиры, забавы, заблужденья <br/>
На мирный шум дубров, на тишину полей, <br/>
На праздность вольную, подругу размышленья. </p>
20
30. Теги верхнего уровня
• <html>
• Корневой тег, в который вкладываются все остальные теги страницы.
30
31. Теги верхнего уровня
• <head>
• Содержит информацию о странице:
• Заголовок
• Подключаемые файлы
• Мета информацию
• <body>
• Визуальное содержимое страницы
31
41. "Текстовые" теги
• <p> — paragraph
• Абзац
• По умолчанию отступы сверху и снизу
• <h1>..<h6> — header
• Заголовок: h1, h2, h3, h4, h5, h6
• <br/> — break
• Разрыв строки
41
42. Деревня
Приветствую тебя, пустынный уголок,
Приют спокойствия, трудов и вдохновенья,
Где льется дней моих невидимый поток
На лоне счастья и забвенья.
Я твой — я променял порочный двор Цирцей,
Носкошные пиры, забавы, заблужденья
На мирный шум дубров, на тишину полей,
На праздность вольную, подругу размышленья.
42
43. <h2> Деревня </h2>
<p> Приветствую тебя, пустынный уголок, <br/>
Приют спокойствия, трудов и вдохновенья, <br/>
Где льется дней моих невидимый поток <br/>
На лоне счастья и забвенья. </p>
<p> Я твой — я променял порочный двор Цирцей, <br/>
Носкошные пиры, забавы, заблужденья <br/>
На мирный шум дубров, на тишину полей, <br/>
На праздность вольную, подругу размышленья. </p>
43
44. "Текстовые" теги
• <pre> — preformatted
• сохраняет пробелы и разрывы
• <hr> — horizontal rule
• горизонтальная линия
• <b>[bold], <i>[italic], <blockout>, <mark>
• выделение текста
44
57. Список определений
<dl> <!--definition list-->
<dt>HTML-документ</dt> <!--definition term-->
<dd>Обычный текстовый файл, который может содержать в
себе текст, теги и стили. Изображения и другие объекты
хранятся отдельно.</dd> <!--definition description-->
</dl>
01.
02.
03.
04.
57
65. Замещаемые элементы
<img width="100" height="200" src="/cat.png" alt="котик">
• атрибуты width,height — ширина или высота задается в пикселах
• атрибут src — url картинки
• атрибут alt — альтернативный текст, который выводится, если
изображение не загрузилось
65
69. Аудио и видео
<audio><source src="music.mp3"></audio>
• autoplay — проигрывание при загрузке страницы
• controls — панель управления плеером
• loop — автоповтор
• preload — загрузка файла вместе с загрузкой страницы
• src — путь до трека
69
70. Аудио и видео
<video height="300" poster="pictures/poster.jpg"><source src="pictures/
film.mp4"></video>
70
75. Формы
<input type=".." value=".." name=".."/>
• text —поле для ввода
• password —
• checkbox —✓ чай кофе танец
• radio —• чай кофе
• button —я кнопка
• file — Browse...
• submit/reset —Submit /Reset
75
76. Формы в HTML5
• color —
• date —
• email —
• url —
• number —
• range —
• search —
• month —
76
77. Другие элементы форм
• <keygen name="security"></keygen>
• <textarea>много текста</textarea>много текста
• <select><option>Чебурашка</option>..</select>Чебурашка
77
78. Атрибуты формы
• value — значение
• name — название поля
• size — ширина поля в количсте символов
• checked = “checked" (radio, checkbox)
• selected = “selected" (option)
• tabindex — порядок получения фокуса
• required — обязательно заполнить (HTML5)
• multiple — множественная загрузка файлов(HTML5)
78
80. GET
• Передача небольших текстовых данных на сервер (например, поиск
по сайту)
• http://yandex.ru/
yandsearch?text=%D1%8F%D0%BD%D0%B4%D0%B5%D0%BA%D1%81&clid=19554
80
88. Блочные и строчные элементы
Блочный элемент
• До и после себя генерирует разрыв потока (строки)
Строчные элементы(инлайн)
• Находится внутри строки
• Переносится на следующую строку, если не влазит в текущую
• Ни единого разрыва
88
89. Блочные и строчные элементы
<div>
• division — блочный элемент
<span>
• инлайн элемент
89
90. Блочные и строчные элементы
Векторное поле упорядочивает функциональный анализ, что
несомненно приведет нас к истине. Предел последовательности
накладывает действительный функциональный анализ, как и
предполагалось. Интеграл Пуассона стабилизирует бином Ньютона,
дальнейшие выкладки оставим студентам в качестве несложной
домашней работы.
90
91. Блочные и строчные элементы
<span>Векторное поле упорядочивает функциональный
анализ, что несомненно приведет нас к
истине.</span> Предел последовательности накладывает
действительный функциональный анализ, как и предполагалось.
Интеграл Пуассона стабилизирует бином Ньютона, дальнейшие
выкладки оставим студентам в качестве несложной домашней работы.
91
92. Блочные и строчные элементы
Векторное поле упорядочивает функциональный анализ, что
несомненно приведет нас к истине. Предел последовательности
накладывает действительный функциональный анализ, как и
предполагалось. Интеграл Пуассона стабилизирует бином Ньютона,
дальнейшие выкладки оставим студентам в качестве несложной
домашней работы.
92
93. Блочные и строчные элементы
<div>Векторное поле упорядочивает функциональный
анализ, что несомненно приведет нас к истине.</div>
Предел последовательности накладывает действительный
функциональный анализ, как и предполагалось. Интеграл Пуассона
стабилизирует бином Ньютона, дальнейшие выкладки оставим
студентам в качестве несложной домашней работы.
93
94. Блочные и строчные элементы
Векторное поле упорядочивает функциональный анализ, что
несомненно приведет нас к истине.
Предел последовательности накладывает действительный
функциональный анализ, как и предполагалось. Интеграл Пуассона
стабилизирует бином Ньютона, дальнейшие выкладки оставим
студентам в качестве несложной домашней работы.
94
96. Блочные и строчные элементы
• Строчные в блочные
• Строчные в строчные
• Блочные в блочные
Блочные в строчные НЕЛЬЗЯ
96
97. Блочные и строчные элементы
<span> Однажды в студёную
<div>зимнюю пору</div> лошадка... </span>
<span> Однажды в студёную </span>
<div>зимнюю пору</ div> лошадка..
01.
02.
97
101. HTML 5
• <aside> — боковая панель в статье
• <article> — независимое, автономное содержание
• <head>
• <footer>
• <section> — главы, колонтитулы и другие разделы документа
• <time datetime="2008-02-14"> — указание даты и времени
• <menu> — отображение списка меню
• <keygen> — шифрование для формы
101
106. Валидность
Валидность — это соответствие стандартам, например, таким как:
1. Все теги закрыты или одиночные
2. Нет блочных тегов внутри строчных
3. У всех картинок указаны размеры
4. ...
106
