- •Учебный Курс по 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- фильтров.
Заключение
Если вы внимательно ознакомились с данной работой, то наверняка уже обладаете многими качествами HTML-верстальщика. Все остальные свойства приходят с опытом. Поэтому последним советом будет взять готовый дизайн и попытаться сделать из него HTML или XHTML документ с учетом полученных знаний. Попытайтесь сделать один и тот же дизайн в соответствии с несколькими спецификациями. Не забудьте проверить правильность полученных документов и CSS. Попробуйте свои силы в составлении веб-документов оптимизированных для поисковых систем. Не жалейте времени, чтобы разобраться в непонятных для вас вопросах.
Приложение
Таблица поддержки email-клиентами свойств CSS.
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html
Support for the <style> element | ||||||||||||||||
|
Outlook 2003/Express |
Outlook 2007 |
AOL 9 |
Lotus Notes |
Thunderbird |
|
Gmail |
Hotmail |
Live Mail |
Old Yahoo! |
New Yahoo! |
|
Mac Mail |
Entourage |
Eudora |
Thunderbird |
<style> element in the <head> |
+ |
+ |
+ |
- |
+ |
|
- |
- |
+ |
+ |
+ |
|
+ |
+ |
- |
+ |
<style> element in the <body> |
+ |
+ |
+ |
- |
+ |
|
- |
+ |
- |
+ |
+ |
|
+ |
+ |
- |
+ |
Support for the <link> element | ||||||||||||||||
|
Outlook 2003/Express |
Outlook 2007 |
AOL 9 |
Lotus Notes |
Thunderbird |
|
Gmail |
Hotmail |
Live Mail |
Old Yahoo! |
New Yahoo! |
|
Mac Mail |
Entourage |
Eudora |
Thunderbird |
<link> element in the <head> |
+ |
+ |
+ |
+ |
+ |
|
- |
- |
- |
- |
+ |
|
+ |
+ |
- |
+ |
<link> element in the <body> |
+ |
+ |
+ |
+ |
+ |
|
- |
- |
- |
- |
+ |
|
+ |
+ |
- |
+ |
Support for CSS Selectors | ||||||||||||||||
|
Outlook 2003/Express |
Outlook 2007 |
AOL 9 |
Lotus Notes |
Thunderbird |
|
Gmail |
Hotmail |
Live Mail |
Old Yahoo! |
New Yahoo! |
|
Mac Mail |
Entourage |
Eudora |
Thunderbird |
* |
+ |
- |
+ |
- |
+ |
|
- |
+ |
+ |
+ |
+ |
|
+ |
+ |
- |
+ |
e |
+ |
+ |
+ |
- |
+ |
|
- |
+ |
+ |
+ |
+ |
|
+ |
+ |
- |
+ |
e > f |
- |
- |
- |
- |
+ |
|
- |
- |
- |
+ |
+ |
|
+ |
+ |
- |
+ |
e:link |
+ |
+ |
+ |
- |
+ |
|
- |
+ |
+ |
+ |
+ |
|
+ |
+ |
- |
+ |
e:active, e:hover |
+ |
- |
+ |
- |
+ |
|
- |
+ |
+ |
+ |
+ |
|
+ |
+ |
- |
+ |
e:focus |
- |
- |
- |
- |
+ |
|
- |
- |
- |
+ |
+ |
|
+ |
+ |
- |
+ |
e+f |
- |
+ |
- |
- |
+ |
|
- |
+ |
- |
+ |
- |
|
+ |
- |
- |
+ |
e[foo] |
- |
- |
- |
- |
+ |
|
- |
+ |
- |
+ |
+ |
|
+ |
- |
- |
+ |
e.className |
+ |
+ |
+ |
- |
+ |
|
- |
+ |
- |
+ |
+ |
|
+ |
+ |
- |
+ |
e#id |
+ |
+ |
+ |
- |
+ |
|
- |
+ |
- |
+ |
+ |
|
+ |
+ |
- |
+ |
e:first-line |
+ |
- |
+ |
- |
+ |
|
- |
+ |
- |
+ |
+ |
|
+ |
+ |
- |
+ |
e:first-letter |
+ |
- |
+ |
- |
+ |
|
- |
+ |
- |
+ |
+ |
|
+ |
+ |
- |
+ |
Support for CSS Properties | ||||||||||||||||
|
Outlook 2003/Express |
Outlook 2007 |
AOL 9 |
Lotus Notes |
Thunderbird |
|
Gmail |
Hotmail |
Live Mail |
Old Yahoo! |
New Yahoo! |
|
Mac Mail |
Entourage |
Eudora |
Thunderbird |
background-color |
+ |
+ |
+ |
- |
+ |
|
+ |
+ |
+ |
+ |
+ |
|
+ |
+ |
- |
+ |
background-image |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
- |
+ | ||
background-position |
+ |
- |
+ |
- |
+ |
- |
- |
- |
- |
+ |
+ |
+ |
- |
+ | ||
background-repeat |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
- |
+ | ||
border |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
border-collapse |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
- |
+ | ||
border-spacing |
- |
- |
- |
- |
+ |
+ |
- |
- |
+ |
+ |
+ |
- |
- |
+ | ||
bottom |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
- |
+ | ||
caption-side |
- |
- |
- |
- |
+ |
+ |
- |
+ |
+ |
- |
- |
- |
- |
+ | ||
clear |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
clip |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
- |
+ | ||
color |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
cursor |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
- |
- |
+ | ||
direction |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
- |
+ | ||
display |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
empty-cells |
- |
- |
- |
- |
+ |
+ |
- |
+ |
+ |
+ |
+ |
- |
- |
+ | ||
float |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
font-family |
+ |
+ |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
font-size |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
font-style |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
font-variant |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
font-weight |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
height |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
left |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
- |
+ | ||
letter-spacing |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
line-height |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
list-style-image |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
- |
+ | ||
list-style-position |
+ |
- |
+ |
- |
+ |
+ |
- |
+ |
- |
+ |
+ |
+ |
- |
+ | ||
list-style-type |
+ |
- |
+ |
+ |
+ |
+ |
- |
- |
+ |
+ |
+ |
+ |
- |
+ | ||
margin |
+ |
+ |
+ |
- |
+ |
+ |
- |
- |
+ |
+ |
+ |
+ |
- |
+ | ||
opacity |
- |
- |
- |
- |
+ |
- |
- |
- |
+ |
- |
+ |
- |
- |
+ | ||
overflow |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
- |
+ | ||
padding |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
position |
+ |
- |
+ |
- |
+ |
- |
- |
- |
- |
- |
+ |
+ |
- |
+ | ||
right |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
- |
+ | ||
table-layout |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
text-align |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
text-decoration |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
text-indent |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
text-transform |
+ |
+ |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
top |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
- |
+ | ||
vertical-align |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
visibility |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
white-space |
- |
+ |
- |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
width |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
word-spacing |
+ |
- |
+ |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
- |
+ | ||
z-index |
+ |
+ |
+ |
- |
+ |
- |
+ |
- |
+ |
- |
+ |
+ |
- |
+ |