1. Структура документа
1.1. общий вид документа
1.2. doctype
1.2.1. <!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">
1.2.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1.2.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.2.4. Quirks mode
1.2.4.1. Режим совместимости
1.3. head
1.3.1. title
1.3.1.1. <title>Заголовок</title>
1.3.2. meta
1.3.2.1. <meta name="description" content="Это тестовая страница." />
1.3.2.2. http-equiv
1.3.2.2.1. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
1.3.3. link
1.3.3.1. <link type="text/css" href="reset.css" rel="Stylesheet" />
1.3.3.2. <link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
1.3.4. script
1.3.4.1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
1.3.4.2. <script type="text/javascript"> ... </script>
1.3.5. style
1.3.5.1. <style type="text/css"> h1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; } </style>
1.4. body
1.4.1. элементы
1.4.1.1. атрибуты
1.4.1.1.1. id
1.4.1.1.2. name
1.4.1.1.3. style
1.4.1.1.4. class
1.4.1.2. div
1.4.1.3. table
1.4.1.3.1. tr, th
1.4.1.3.2. thead, tbody, tfoot
1.4.1.4. span
1.4.1.5. a
1.4.1.5.1. абсолютные
1.4.1.5.2. относительные
1.4.1.6. p
1.4.1.7. img
1.4.1.8. h1, h2, h3,..
1.4.1.9. ul, ol, li
1.4.1.10. form
1.4.1.10.1. атрибуты
1.4.1.10.2. input
1.4.1.10.3. select
1.5. комментарии
1.5.1. <!-- текст в комментарии -->
1.6. html5
1.6.1. нововведения
1.6.1.1. doctype
1.6.1.1.1. <!DOCTYPE html>
1.6.1.2. audio
1.6.1.3. video
1.6.1.4. article
1.6.1.5. header
1.6.1.6. section
2. Введение
2.1. сегодняшняя тема
2.1.1. html
2.2. тема
2.2.1. и простая
2.2.2. и сложная
2.2.3. можно говорить безконечно
2.3. разделение труда
2.3.1. дизайнеры
2.3.2. верстальщики
2.3.2.1. цель - сделать страницу максимально близкой к дизайну
2.3.3. программисты
2.4. цель занятия
2.4.1. не разбор различных тонкостей
2.4.2. как устроен язык
2.4.3. какие основные блоки
2.4.4. не большой экскурс в историю
2.5. нужен практический опыт
3. Стилевое оформление/CSS
3.1. назначение
3.1.1. отделить структуру от оформления
3.2. способы задания оформления
3.2.1. селекторы
3.2.1.1. <style> p { font-size: 21px; color: green; } </style> <p>Рассказ о том, как вредно красить батареи</p>
3.2.2. стили
3.2.2.1. <p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
3.2.3. классы
3.2.3.1. <style> .colortext { font-size: 21px; color: green; } </style> <span class="colortext">Рассказ о том, как вредно красить батареи</span>
3.3. селекторы
3.3.1. селекторами элементов;
3.4. каскадность
3.5. приоритет
3.6. позиционирование элементов
3.7. типы элементов
3.7.1. блочные
3.7.1.1. div
3.7.2. строчные
3.7.2.1. span
3.8. отступы
3.8.1. margin
3.8.2. padding
3.8.3. пример
3.8.3.1. http://jsfiddle.net/87mte/
3.9. версии стандарта
3.9.1. актуальная
3.9.1.1. 2.1
3.9.2. в разработке
3.9.2.1. 3
3.10. готовые решения
4. Стандарты, история
4.1. html4
4.1.1. 2000 - последние изменения в стандарте
4.2. XHTML
4.2.1. 1998 - начало работы
4.2.2. 2000 - XHTML 1.0
4.3. html5
4.3.1. 2007 - старт рабочей группы
4.3.2. 2014 - предполагаемый релиз стандарта
5. Понятие HTML
5.1. понятие гипертекста
5.2. Разработан Тимом Бернерсом-Ли 1991 году
5.3. HTML - HyperText Markup Language - язык разметки гипертекста
5.4. позволяет создавать страницы
5.4.1. содержащие
5.4.1.1. аудио
5.4.1.2. видео
5.4.1.3. текст
5.4.1.4. изображения
5.4.2. на самом деле сама страница их не содержит
5.5. представляет собой обычную текстовую страницу
5.6. HTML-документы имеют расширение .html или .htm)
5.7. HTML-документы отображаются Веб-браузерами или Интернет-обозревателями (Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera,…)
5.7.1. Браузерные движки
5.7.1.1. WebKit
5.7.1.2. Presto
5.7.1.3. Gecko
5.8. основан на тегах
5.8.1. одиночные
5.8.1.1. <тег параметр1="значение" параметр2="значение">
5.8.2. парные
5.8.2.1. <тег параметр1="значение" параметр2="значение">...</тег>
5.9. элементы разметки
5.9.1. полный тег
5.9.2. неполный тег
5.9.3. символьный примитив
5.9.3.1. html сущности
5.9.3.1.1. <
5.9.3.1.2. >
5.9.3.1.3. ©
5.9.3.1.4.