- •Учебный Курс по 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- фильтров.
Часто используемые элементы и атрибуты
В данной главе мы рассмотрим особенности написания некоторых элементов, ставшими de facto при составлении HTML/XHTML документов.
Таблица: cellpadding, cellspacing, border, width
Типичное, и, на мой взгляд, правильное описание таблицы в HTML документе строгого дизайна выглядит следующим образом:
Таблица
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”>
Указывать ширину, разумеется, необязательно, все зависит от обстоятельств. Что касается других атрибутов, то многие могут поспорить и сказать, что существуют их аналоги в CSS и, логичнее было бы один раз указать их в CSS для всех таблиц. Давайте их рассмотрим. Аналогом для cellspacing является утвержденное стандартом CSS свойство border-spacing. Однако, проблема в том, что это свойство не понимается, наиболее популярным в настоящий момент, браузером Internet Explorer 6.0. Поэтому, можно сказать, что это свойство совершенно бесполезно, по крайней мере до выхода новой версии Internet Explorer, где эта проблема наверняка будет решена. Впрочем, существует альтернатива определения этого свойства таблицы с CSS. Свойство border-collapse со значением «collapse» решает эту проблему (см. также 5.5.11).
Использование border-collapse как альтернативы для cellspacing
table { border-collapse: collapse; }
Аналогом для cellpadding является CSS свойство padding, элемента TD. Здесь придраться не к чему, кроме того момента, что cellpadding, описанный для конкретной таблицы, повлияет только на текущую таблицу. В свою очередь padding описанный для всех элементов TD будет иметь влияние на все таблицы, что не всегда приемлемо, особенно в случаях использования нескольких CSS файлов в одном документе, когда приоритеты некоторых описанных вами CSS стилей могут быть восприняты браузером неоднозначно. Что касается border, то он также может быть опущен, поскольку по умолчанию браузер не рисует рамку таблицы. Однако его присутствие может упростить отладку документа – для того чтобы увидеть структуру таблицы, достаточно изменить ноль на единицу: border=”1”.
Изображение: width, height, alt, border
Типичная запись для изображения выглядит следующим образом:
Изображение
<img src="mypic.jpg" width="100" height="70" border="0" alt="" />
Элемент IMG как правило должен содержать помимо обязательного атрибута SRC, атрибут ALT, регламентированный стандартом HTML 4 как обязательный. Атрибуты WIDTH и HEIGHT должны быть указаны для того, чтобы облегчить работу браузеру по построению отображаемой страницы. Дело в том, что если атрибуты WIDTH и HEIGHT не указаны, браузер не знает какого размера изображение до того момента пока оно не загружено. К тому же, наличие этих атрибутов сохранит правильное отображение документа даже в том случае, если загрузка изображений выключена пользователем. Не следует забывать и про атрибут BORDER, который как правило имеет значение 0 в документах строгого дизайна. Типичная проблема заключается в том, что когда тег IMG заключается в гиперссылку (элемент A), то на странице появляется нежелательный эффект – появляется рамка изображения. Для предотвращения этой проблемы, независимо от того, находится изображение внутри гиперссылки или нет, следует всегда применять атрибут BORDER со значением 0. Этот атрибут также может быть успешно замещен стилем, заданным в CSS (см. также 5.5.7):
Определение border для изображений в CSS
img { border-width: 0px; }
Такой записи будет достаточно, чтобы не использовать атрибут BORDER для каждого элемента IMG.