4. Стажировка-2014
Особенности XHTML
• XHTML – строгая версия языка
разметки
• В XHTML имена тэгов и атрибутов
только в нижнем регистре
• В XHTML все тэги должны быть
закрыты
• Браузеры не обрабатывают
документ, если в нём ошибка
• Нет обратной совместимости с HTML
5. Стажировка-2014
HTML, doctype
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml
11.dtd">
8. Стажировка-2014
Тэги HTML
До HTML 5:
http://www.w3.org/TR/html4/index/
elements.html
a
abbr
form
H1, H2, H3, H4, H5, H6
p
iframe
img
strong, small, i
ul, li table, thead,
tbody
title
div
12. Стажировка-2014
Новые API HTML 5
• Canvas
• Offline Web Apps
• Drag-and-drop
• History API
• Web Storage
• Geolocation
• Web SQL Database
• HTML File API
14. Стажировка-2014
CSS
CSS - каскадные таблицы стилей.
Используется для задания:
• цветов, шрифтов элементов
• теней, фона
• расположение блоков, отступов,
границ
• анимации
20. Стажировка-2014
Расположение блоков на странице
Строчные элементы – это
элементы документа, которые
являются частью строки.
Примеры: <img>, <span>, <a>,
<q>, <code>
21. Стажировка-2014
Свойства строчных элементов
• Внутри строчных элементов можно
поместить только строчные элементы.
• width, height не работают
• несколько строчных элементов идущих
подряд помещаются на одной строке
• можно выравнивать по вертикали,
используя свойство vertical-align.
23. Стажировка-2014
Расположение блоков на странице
Блочные элементы – элементы,
которые отображаются на
странице в виде прямоугольника.
Примеры: <div>, <form>, <p>,
<table>, <h1>...<h6>, <ul>
24. Стажировка-2014
Свойства блочных элементов
• Элемент занимает всю доступную
ширину
• Элемент начинается на новой строке
• Блоки располагаются по вертикали друг
за другом
• Можно выставить width, height
26. Стажировка-2014
Свойство float
Пример на htmlbook.ru
Определяет, по какой стороне будет
выравниваться элемент, при этом
остальные элементы будут обтекать его с
других сторон.
float: left | right | none | inherit
28. Стажировка-2014
Свойство clear
Пример на htmlbook.ru
clear: left | right | none | both | inherit
Устанавливает, с какой стороны элемента
запрещено его обтекание другими
элементами.
30. Стажировка-2014
Свойство position
Пример на htmlbook.ru
position: absolute| fixed | relative | static
Устанавливает способ позиционирования
элемента на странице относительно окна
браузера или других элементов.
32. Стажировка-2014
Меню с помощью <ul>, <li>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
33. Стажировка-2014
Меню с помощью <ul>, <li>
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
li {
float: left;
}
Ссылка на пример
39. Стажировка-2014
Twitter Bootstrap, ZURB Foundation:
фреймворки для создания
веб-страниц
• Готовые шаблоны
• Встроенные стили для таблиц, меню,
навигации, прогресс-баров и др.
компонентов
• Темы оформления
• Оптимизация под мобильные девайсы
• Много плагинов, онлайн сервисов
41. Стажировка-2014
Полезности для браузера
• Developer Tools
• Color picker плагины
• Генераторы псевдотекста Lorem Ipsum
• PixelPerfect
• Ruler-плагины
• Stylebot
• LiveCSSEditor
42. Стажировка-2014
Что почитать?
• The W3C Markup Validation Service
• Can I use? http://caniuse.com
• Htmlbook.ru htpp://htmlbook.ru
• http://css-tricks.com/video-screencasts/
• http://jsfiddle.net/