- •Учебный Курс по html Содержание
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль Правила именования папок и файлов
- •Правила для html-кода
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css-кода
- •Основные правила для кода JavaScript
- •Основные элементы html
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойства таблицы
- •Свойства отображения
- •Свойства размера
- •Свойства позиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Ie 6 и ниже
- •Ie 7 и все современные браузеры
- •Практическая верстка с чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Проверка документов на соответствие спецификациям
- •Тело документа
- •Основные виды веб-страниц
- •Страница с фиксированной шириной
- •Страница с плавающей шириной
- •Основные элементы страницы
- •Логотип
- •Способы использования png
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Основные способы персонализации стилей для браузеров
Иногда возникает необходимость указать стили для конкретного типа браузера. В таких случаях используется один из нижеперечисленных приемов. Однако, применение подобных решений является крайне нежелательным и, соответственно, может быть использовано только в случае необходимости.
Запись фильтра:
<css filter> tag{…}
Например:
* html div{…}
Ie 6 и ниже
* html или *html
Только IE 7
*:first-child+html или *+html
Ie 7 и все современные браузеры
html>body {}
Все современные браузеры, кроме IE 7
html>/**/body {}
Opera 9 и выше
*:first-child+html или html:first-child
Safari и FireFox (CSS3)
body:last-child {}
Замечание: под современными браузерами понимаются Firefox 2.0 и выше, Opera 9.0 и выше, Safari 2.0.2 и выше. IE 6 к их числу не относится.
Также существует постоянно обновляемая таблица CSS-фильтров: http://thomas.tanreisoftware.com/css_filters/huzzah.html
Практическая верстка с чего начинается документ
Итак, с чего же начинается HTML-документ? Конечно же, с описания его типа при помощи DOCTYPE! (см. ). В первую очередь вы должны полностью осознавать, какой именно тип документа вы собрались воплотить в жизнь. Впрочем, независимо от того, какой это будет документ, произвольный HTML или XHTML 1.0 Strict, вам в любом случае необходимо придерживаться общих правил форматирования (см. ) и советам, изложенным здесь и в последующих разделах.
При помощи конструкции DOCTYPE браузер определяет с каким типом документа он имеет дело. Ниже приведены конструкции DOCTYPE для основных видов документов.
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Следует отметить, что в Интернет встречается много документов с неполной записью DOCTYPE – когда не указан URL на DTD, либо не указан вовсе. В случае отсутствия DOCTYPE в документе, браузер настраивается на тип документа по умолчанию, который, как вы сами понимаете, может отличаться от ожидаемого. Подобные неточности являются причиной многих ошибок и трудностей при работе с такими документами. Самая известная особенность связанная с указанием типа документа – это модель отображения блочных элементов, характерная для браузеров Internet Explorer (см ). Во избежание возможных ошибок и неприятностей всегда указывайте полную запись DOCTYPE.