XML HTML CSS Александр Березневатый, Senior Java Developer & Team Lead. - презентация

1 XML HTML CSS Александр Березневатый, Senior Java Developer & Team Lead

2 План дня > История Web > XML > HTML > CSS > HTML 5 & CSS 3 > Домашнее задание

3 Цели > Общее понимание технологий > Часто встречающиеся сложности > Заинтересовать в изучении > Best practice

4 История: Internet > 1957 год, проект ARPANET > – день рождения Internet > 1971 – > 1983 – TCP/IP > 1984 – DNS, NSFNet > 1989 – Cern, WWW > 1990 – dial up

5 История: WWW > Web 1.0 разработана в Cern > Тим Бернерс-Ли > URI, HTTP, HTML > 1991 – NCSA Mosaic > 1994 – W3C

6 История: Browsers > NCSA Mosaic > Netscape Navigator > Internet Explorer > Mozilla Firefox > Google Chrome > Opera > Safari

7 История: Browsers

8

9

10 История: WWW > 2005 – Web 2.0 (Tim Oreilly) > Web Services > Ajax > Tags > Social networks > Design

11 XML

12 XML: Описание > Язык разметки > Исторически появился позже HTML > Расширяемый

13 XML: Структура content

14 XML: Структура Hyperion Dan Simmons science fiction Слово о полку Игореве Летопись

15 XML: Валидация > DTD (Document type definition)

16 XML: Валидация > XML схема:

17 XML: Применение > Описание проектов maven > Конфигурация приложения > XHTML > Веб сервисы > многое другое

18 HTML

19 HTML: Описание > Гипертекстовый язык разметки > Имеет несколько диалектов > Cтандартизируется W3C

20 HTML: Поддиалекты > HTML 4 Strict > HTML 4 Transitional > HTML 4 Frameset > HTML 5 > XHTML 1.0 > XHTML 1.1 > XHTML 2.0 > XHTML 5

21 HTML: Структура

22 HTML: Структура

23 HTML: Валидация > можно валидировать на сайте W3C > уменьшает количество ошибок > способствует кросбраузерности > но может выдавать «ложные» ошибки

24 HTML: DOM

25 HTML: Head

26 HTML: Блоки

27 HTML: Таблицы Колонка 1 ряд 1 Колонка 2 ряд 1 Колонка 1 ряд 2 Колонка 2 ряд 2

28 HTML: Текст и другие

29 HTML: Формы

30 HTML: Формы (input) > text > password > button > checkbox > radio > file > submit > hidden

31 HTML: Формы Password:

32 HTML: Формы (HTTP) > URL > Method > Headers > Тело запроса > Статус ответа

33 HTML: Прочее

34 HTML: Best practices > В первую очередь – язык разметки > Используйте XHTML и валидацию > Скрипты и стили должны быть в head > Практикуйте «ненавязчивость»

35 CSS

36 CSS: Описание > Отделяют разметку от стилей > Позволяют динамически подключать темы > Предоставляют большие возможности > Вызывают больше всего проблем с кроссбраузерностью

37 CSS: Селекторы > * > div {} >.myClassName {} > #myElementId {} >.myClass1,.myClass2 {} > div.myClass {}

38 CSS: Каскадность и наследование > потомки наследуют некоторые свойства родителей > * { color: inherit !important; } > Авторские, пользовательские стили и стили по умолчанию > дирректива !important

39 CSS: print { body { font-size: 10pt } screen { body { font-size: 13px } screen, print { body { line-height: 1.2 } }

40 CSS: Блочная модель > padding > margin > border

41 CSS: Блочная модель

42 div.myClass { padding: 12px; margin-left: 5px; border: 1px solid red; }

43 CSS: Визуальная модель > overflow > display > position > float

44 CSS: Визуальная модель

45

46

47

48

49

50

51 CSS: Шрифты > С засечками и без засечек > Кегль (размер) > Начертание > Насыщенность > Ширина

52 CSS: Шрифты > Arial > Helvetica > Tahoma > Times New Roman > Georgia > Verdana > Courier

53 CSS: Цвета > RGB палитра > color: #000; > background-color: #3F557D;

54 CSS: Текст > white-space > text-align > text-decoration

55 CSS: Таблицы > table-layout > border-collapse

56 CSS: Хаки > Лучше не применять > Бывают полезны когда нет времени > Особенно актуальны для IE (_width:5px)

57 CSS: Best practice > Разделяйте позиционирование и тему > Практикуйте ненавязчивость > Группируйте сходные свойства > Минимизируйте хаки (любые) > Используйте ресеты > Используйте скомпонованые стили

58 Верстка

59 Верстка: Табличная Header Left Center Right Footer

60 Верстка: Табличная #myTable { width: 100%; height: 100%; border-collapse: collapse; } #myHeader { height: 75px; } #myLeft { width: 150px; } #myRight { width: 200px; } #myFooter { height: 50px; }

61 Верстка: Табличная

62

63 Верстка: Блочная Header Left Right Center Footer

64 Верстка: Блочная html, body, #myCenter, #myLeft, #myRight { height: 100%; } html, body { padding: 0; margin: 0; } #myHeader { height: 75px; }

65 Верстка: Блочная #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; }

66 Верстка: Блочная

67 > Лучше ведет себя при загрузке > Предназначена именно для разметки > Весь дизайн в CSS > Тяжела для понимания

68 HTML 5 > Новые теги и дополненные старые > Новые принципы разметки > SVG графика > Local Storage & Geolocation > Многопоточность

69 Литература > XML валидация: > HTML спецификация: > HTML учебник: > CSS спецификация:

70 Вопросы

71 Домашнее задание > Сверстать главную страницу toprank > Шаблон прилагается. > Страница должна одинаково отображаться во всех браузерах

72 Домашнее задание