- •Учебный Курс по html
- •1. Введение 3
- •2. Понимание html 4
- •3. Используемые средства и программы 21
- •4. Оформление документов – корпоративный стиль 27
- •6. Практическая верстка 48
- •7. Оптимизация кода для поисковых систем и стандарты доступности (использование нужных тегов, неиспользование устаревших тегов) 92
- •8. Заключение 97
- •9. Приложение 98
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы
- •Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль
- •Правила именования папок и файлов
- •Правила для html
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css
- •Основные правила для JavaScript
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойстватаблицы
- •Свойства отображения
- •Свойства размера
- •Свойствапозиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Общие правила и рекомендации при написании html/xhtml кода
- •С чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Часто используемые элементы и атрибуты
- •Изображение: width, height, alt, border
- •Элемент div
- •Атрибуты class и id
- •Неиспользуемые или редко используемые элементы и атрибуты
- •Элемент font
- •Элемент hr
- •Элемент map
- •Элемент frame
- •Атрибут nowrap
- •Атрибут rowspan
- •Использование однопиксельного прозрачного giFа
- •Использование css свойств
- •Проверка документов на соответствие спецификациям
- •Основные виды layout веб-страниц
- •Основные элементы страниц: логотип, меню, табы, формы; применение готовых js решений
- •Логотип
- •Способы использования png, в том числе для отображения теней
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности (использование нужных тегов, неиспользование устаревших тегов)
- •Заключение
- •Приложение
- •Краткая таблица css- фильтров.
Краткая таблица css- фильтров.
|
Filter |
CSS Level |
Mozilla |
Internet Explorer for Windows |
Opera |
Safari | |||
1.8+ |
7 |
6 |
5.5 |
9.0-9.21 |
Web Kit |
2.02-2.04 | |||
entire style sheets |
@import url(styles.css) all; |
1 |
Y |
N |
N |
N |
Y |
Y |
Y |
@import url(styles.css) All; |
1 |
Y |
N |
N |
N |
Y |
Y |
Y | |
@import "style.css"/**/; |
1 |
Y |
Y |
Y |
N |
Y |
Y |
Y | |
@import url(/**/"style.css"); |
1 |
Y |
N |
Y |
N |
N |
N |
N | |
<!---->stylesheet |
1 |
Y |
N |
N |
N |
Y |
Y |
Y | |
single rules |
.fake.classname selector |
1 |
N |
N |
Y |
Y |
N |
N |
N |
selector[attribute] |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
selector[attribute =value] |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
selector[attribute$="ending"] |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
selector:lang(languageCode) |
1 |
Y |
N |
N |
N |
Y |
Y |
N | |
[attribute|="hyphenated-value"] |
1 |
Y |
Y |
N |
N |
N |
Y |
Y | |
selector, [dummy] |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
selector, [dummy="dummy"] |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
s\65 lector |
1 |
Y |
Y |
Y |
N |
Y |
Y |
Y | |
se\lector |
1 |
Y |
Y |
Y |
N |
Y |
Y |
Y | |
*>div selector |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
* html selector |
2 |
N |
N |
Y |
Y |
N |
N |
N | |
html>body selector |
2 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
html>/**/body selector |
2 |
Y |
N |
N |
N |
Y |
Y |
Y | |
*+html selector |
2 |
N |
Y |
N |
N |
N |
N |
N | |
*:first-child+html selector |
2 |
N |
Y |
N |
N |
N |
N |
N | |
selector:/* */first-child |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
html:first-child selector |
2 |
N |
N |
N |
N |
Y |
N |
Y | |
head:first-child+body selector |
2 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
head+body selector |
2 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
head + /* */ body selector |
1 |
Y |
N |
N |
N |
Y |
Y |
Y | |
head ~ body selector |
1 |
Y |
Y |
N |
N |
Y |
Y |
N | |
html:not(:only-child) selector |
1 |
Y |
N |
N |
N |
N |
N |
N | |
html[lang*=""] selector |
1 |
N |
Y |
N |
N |
Y |
Y |
Y | |
html:not([lang*=""]) selector |
1 |
Y |
N |
N |
N |
N |
N |
N | |
html/* */:not([lang*=""]) selector |
1 |
Y |
N |
N |
N |
N |
N |
N | |
html:/* */not([lang*=""]) selector |
1 |
Y |
N |
N |
N |
N |
N |
N | |
html[xmlns] selector |
1 |
Y |
Y |
N |
N |
Y |
Y |
Y | |
voice-family: "\"}\"";voice-family: inherit;property: value; |
2 |
Y |
Y |
Y |
N |
Y |
Y |
Y | |
single declarations |
property /**/:value; |
1 |
Y |
Y |
N |
Y |
Y |
Y |
Y |
property: /**/value; |
1 |
Y |
Y |
Y |
N |
Y |
Y |
Y | |
p\roperty:value; |
1 |
Y |
Y |
Y |
N |
Y |
Y |
Y | |
<!--[if IE]> markup <![endif]--> |
|
N |
Y |
Y |
Y |
N |
N |
N | |
XHTML based |
<style … ><!---->stylesheet</style> |
|
Y |
N |
N |
N |
Y |
Y |
Y |
<link media="screen and all" … /> |
|
Y |
N |
N |
N |
Y |
Y |
N | |
<style media="screen and all" … /> |
|
Y |
N |
N |
N |
Y |
Y |
N | |
<link type="text/nonsense" … /> |
|
N |
N |
N |
N |
Y |
Y |
Y | |
<style type="text/nonsense" … > |
|
N |
N |
N |
N |
Y |
N |
N | |
<link type="text/css; charset=charset" … /> |
|
Y |
N |
N |
N |
Y |
Y |
Y | |
<link rel="extra-keyword stylesheet" … /> |
|
Y |
N |
N |
N |
Y |
Y |
Y | |
<link title="should load" … /><link title="shouldn't load" … /> |
|
N |
Y |
Y |
Y |
N |
N |
N | |
<link/style title="should load" … ><style title="probably shouldn't load" … /> |
|
N |
Y |
Y |
Y |
Y |
N |
N |
1 В IE6 есть проблема: при указании свойства float в состояние left либо right соответствующий margin (margin-left либо margin-right соответственно) удваивается.