XML HTML CSS Александр Березневатый, Senior Java Developer & Team Lead
План дня > История Web > XML > HTML > CSS > HTML 5 & CSS 3 > Домашнее задание
Цели > Общее понимание технологий > Часто встречающиеся сложности > Заинтересовать в изучении > Best practice
История: Internet > 1957 год, проект ARPANET > – день рождения Internet > 1971 – > 1983 – TCP/IP > 1984 – DNS, NSFNet > 1989 – Cern, WWW > 1990 – dial up
История: WWW > Web 1.0 разработана в Cern > Тим Бернерс-Ли > URI, HTTP, HTML > 1991 – NCSA Mosaic > 1994 – W3C
История: Browsers > NCSA Mosaic > Netscape Navigator > Internet Explorer > Mozilla Firefox > Google Chrome > Opera > Safari
История: Browsers
История: WWW > 2005 – Web 2.0 (Tim Oreilly) > Web Services > Ajax > Tags > Social networks > Design
XML
XML: Описание > Язык разметки > Исторически появился позже HTML > Расширяемый
XML: Структура content
XML: Структура Hyperion Dan Simmons science fiction Слово о полку Игореве Летопись
XML: Валидация > DTD (Document type definition)
XML: Валидация > XML схема:
XML: Применение > Описание проектов maven > Конфигурация приложения > XHTML > Веб сервисы > многое другое
HTML
HTML: Описание > Гипертекстовый язык разметки > Имеет несколько диалектов > Cтандартизируется W3C
HTML: Поддиалекты > HTML 4 Strict > HTML 4 Transitional > HTML 4 Frameset > HTML 5 > XHTML 1.0 > XHTML 1.1 > XHTML 2.0 > XHTML 5
HTML: Структура
HTML: Структура
HTML: Валидация > можно валидировать на сайте W3C > уменьшает количество ошибок > способствует кросбраузерности > но может выдавать «ложные» ошибки
HTML: DOM
HTML: Head
HTML: Блоки
HTML: Таблицы Колонка 1 ряд 1 Колонка 2 ряд 1 Колонка 1 ряд 2 Колонка 2 ряд 2
HTML: Текст и другие
HTML: Формы
HTML: Формы (input) > text > password > button > checkbox > radio > file > submit > hidden
HTML: Формы Password:
HTML: Формы (HTTP) > URL > Method > Headers > Тело запроса > Статус ответа
HTML: Прочее
HTML: Best practices > В первую очередь – язык разметки > Используйте XHTML и валидацию > Скрипты и стили должны быть в head > Практикуйте «ненавязчивость»
CSS
CSS: Описание > Отделяют разметку от стилей > Позволяют динамически подключать темы > Предоставляют большие возможности > Вызывают больше всего проблем с кроссбраузерностью
CSS: Селекторы > * > div {} >.myClassName {} > #myElementId {} >.myClass1,.myClass2 {} > div.myClass {}
CSS: Каскадность и наследование > потомки наследуют некоторые свойства родителей > * { color: inherit !important; } > Авторские, пользовательские стили и стили по умолчанию > дирректива !important
CSS: print { body { font-size: 10pt } screen { body { font-size: 13px } screen, print { body { line-height: 1.2 } }
CSS: Блочная модель > padding > margin > border
CSS: Блочная модель
div.myClass { padding: 12px; margin-left: 5px; border: 1px solid red; }
CSS: Визуальная модель > overflow > display > position > float
CSS: Визуальная модель
CSS: Шрифты > С засечками и без засечек > Кегль (размер) > Начертание > Насыщенность > Ширина
CSS: Шрифты > Arial > Helvetica > Tahoma > Times New Roman > Georgia > Verdana > Courier
CSS: Цвета > RGB палитра > color: #000; > background-color: #3F557D;
CSS: Текст > white-space > text-align > text-decoration
CSS: Таблицы > table-layout > border-collapse
CSS: Хаки > Лучше не применять > Бывают полезны когда нет времени > Особенно актуальны для IE (_width:5px)
CSS: Best practice > Разделяйте позиционирование и тему > Практикуйте ненавязчивость > Группируйте сходные свойства > Минимизируйте хаки (любые) > Используйте ресеты > Используйте скомпонованые стили
Верстка
Верстка: Табличная Header Left Center Right Footer
Верстка: Табличная #myTable { width: 100%; height: 100%; border-collapse: collapse; } #myHeader { height: 75px; } #myLeft { width: 150px; } #myRight { width: 200px; } #myFooter { height: 50px; }
Верстка: Табличная
Верстка: Блочная Header Left Right Center Footer
Верстка: Блочная html, body, #myCenter, #myLeft, #myRight { height: 100%; } html, body { padding: 0; margin: 0; } #myHeader { height: 75px; }
Верстка: Блочная #myFooter, #myContent { position: absolute; width:100%; } #myContent { top: 75px; bottom: 50px; } #myLeft { width: 150px; float: left; } #myRight { width: 200px; float: right; } #myCenter { margin-left: 150px; margin-right: 200px; } #myFooter { height: 50px; bottom: 0; }
Верстка: Блочная
> Лучше ведет себя при загрузке > Предназначена именно для разметки > Весь дизайн в CSS > Тяжела для понимания
HTML 5 > Новые теги и дополненные старые > Новые принципы разметки > SVG графика > Local Storage & Geolocation > Многопоточность
Литература > XML валидация: > HTML спецификация: > HTML учебник: > CSS спецификация:
Вопросы
Домашнее задание > Сверстать главную страницу toprank > Шаблон прилагается. > Страница должна одинаково отображаться во всех браузерах
Домашнее задание