- •Учебный Курс по 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- фильтров.
Элемент hr
Элемент HR (horizontal rule) предназначен для отображения горизонтального разделителя в виде линии. В документах строгого дизайна элемент HR практически не используется по причине его специфического отображения различными браузерами. Старайтесь не использовать этот элемент без особой необходимости.
Элемент map
Элемент MAP создан для нанесения координатной сетки на изображение, выделяя таким образом, области картины, являющиеся гиперссылками.
Использование элемента MAP вносит излишнюю путаницу в структуру документа, делая его менее понятным для поисковых роботов, да и людей тоже. Следует избегать использования этого элемента без особой на то необходимости.
Элемент frame
Использование элемента FRAME подразумевает использование фреймовой структуры документа, для чего должно быть соответствующее требование со стороны заказчика. Использование фреймовой структуры документа имеет ряд недостатков, в числе которых труднодоступность содержания некоторых документов поисковым роботом, невозможность адресации конкретной страницы фрейма и пр. Не используйте фреймы, если для это не указано в требованиях.
Атрибут nowrap
Атрибут NOWRAP предназначен для указания того, что текст внутри элемента не должен разбиваться на несколько строк.
С некоторых пор, атрибут NOWRAP весьма непопулярен, на смену ему пришло CSS свойство white-space со значением nowrap. Используйте атрибут NOWRAP для браузеров, которые не поддерживают CSS свойство white-space. Как правило, это уже устаревшие браузеры вроде Internet Explorer 5.0 или Netscape 4. В случае XHTML, атрибут NOWRAP, как и любой другой атрибут, по правилам XML обязательно должен иметь значение.
Атрибут NOWRAP в XHTML
<td nowrap=”nowrap”>…</td>
Атрибут rowspan
Атрибут ROWSPAN элемента TD указывает, сколько строк таблицы должны быть объединены в одну. Из-за неоднозначного понимания браузерами, этот атрибут делает себя крайне непопулярным. Старайтесь избегать использования этого атрибута в своих документах. Следуя этому правилу вы будете более уверены в том, что ваш документ будет правильно отображаться в различных браузерах.
Атрибут STYLE
Атрибут STYLE задает CSS стиль для элемента в HTML документе. Как это уже обсуждалось выше для элемента FONT, применять атрибут STYLE нужно в случаях крайней необходимости или в целях отладки. Преимущество этого атрибута заключается в том, что CSS стили, описанные внутри него имеют наивысший приоритет по сравнению с HTML атрибутами отвечающими за стиль и любыми другими стилями для этого элемента, описанные в CSS.
Атрибуты HSPACE и VSPACE
Атрибуты HSPACE и VSPACE задают горизонтальный и вертикальный отступ соответственно, для изображений, описанных в документе с помощью элемента IMG. В этих атрибутах нет ничего плохого, за исключением того, что как правило они оказываются бесполезными в документах строгого дизайна. К тому же, они отвечают за стиль отображения а не за структуру документа. Вместо них разумнее использовать CSS свойство margin.
Отступы
При составлении HTML/XHTML документа очень часто возникает необходимость добавления отступа как для текста, так и для других элементов документа. Существует несколько вариантов сделать отступ. В этом разделе мы рассмотрим как следует делать отступы и как этого делать не следует.
Правило для
Неразрывный пробел или (сокр. от non-breaking space) предназначен для связывания нескольких слов текста пробелом, запрещающим перевод строки. Например, если вы хотите, чтобы название фирмы состоящее из нескольких слов, например Coca Cola, не было разбито на строки, используется следующая запись: Coca Cola. Как следствие, может быть использован для вставки одного пробела или нескольких пробелов в любой части документа.
Использование нескольких в качестве отступа это, обычно, первая мысль, которая приходит в голову новичку (конечно, если он знает что такое ). Однако, следует иметь в виду, что этот способ является неправильным.
Наличие в документе двух и более подряд свидетельствует о непрофессионализме автора документа. Простое правило для заключается в том, что если вам одного неразрывного пробела для отступа недостаточно, то для этой цели следует использовать другой способ.
Существует также замечание относительно использования в качестве наполнителя пустых ячеек таблицы и других блочных элементов, таких как DIV. В документах строгого дизайна такой подход зачастую неприемлем по причине того, что в текущем контексте элемента сущность имеет высоту равную высоте текстовой строки в данном контексте. Поэтому в таких случаях, вместо лучше использовать однопиксельный прозрачный GIF с указаными шириной и высотой в один пиксель.