1. The Undefined

2. What is HyperText Markup Language?

3. Some history

4. Divide et impera Divide et impera

5. Divide et impera Divide et impera

6. body { background-color:Gray; } div { border:2px yellow; } p { font-family:verdana; color:white; } Divide et impera body { background-color:Gray; } div { border:2px yellow; } p { font-family:verdana; color:white; } Divide et impera

7. Divide et impera Divide et impera body { background-color:Gray; } div { border:2px yellow; } p { font-family:verdana; color:white; } body { background-color:Gray; } div { border:2px yellow; } p { font-family:verdana; color:white; } styles.css index.html

8. Media TypeDescription allUsed for all media type devices auralUsed for speech and sound synthesizers brailleUsed for braille tactile feedback devices embossedUsed for paged braille printers handheldUsed for small or handheld devices printUsed for printers projectionUsed for projected presentations, like slides screenUsed for computer screens ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals tvUsed for television-type devices CSS Media Types media=“screen and (max-device-width: 480px)" media=“screen and (orientation:portrait)"

9. HTML screen.csshandheld.css print.css

10. Wikipedia

11. Wikipedia – print view

15. http://csszengarden.com/

25. http://www.csszengarden.com/

26. Real world

27. Red

28. Colorblind http://www.colorhexa.com/ff0000 http://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/

30. Use proper class names Main article Article summary Main article Article summary Main article Article summary Main article Article summary

31. Language

33. Semantic markup

34. Rich snippets Microformats RDFa (Resource Description Framework in attributes) Microdata

35. Microformats Кафе Ромашка г. Солнечный, просп. Романтиков, д. 21 Телефон: +7 (890) 123-45-67 Мы работаем ежедневно с 11:00 до 24:00 Text HTML

36. Microformats Yandex Yandex Maps

38. Microdata

39. http://schema.org/

41. Screen

47. Real content (TODO)