- •Учебный Курс по 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- фильтров.
Перенос внутри элемента
Перенос внутри элемента делается в двух случаях: когда достигнут предел количества символов допустимых в одной строке, либо когда перенос строки между элементами воспринимается браузером как дополнительный текстовый узел и доставляет неприятности при отображении. В таком случае перенос следует делать следующим образом:
Перенос внутри элемента
<div class=”navigation”><a
href=”#”>Home</a><a
href=”#”>About Us</a></div>
Вставка специальных символов
Любые специальные символы такие, как «©», «&» и др. следует представлять в виде определенных стандартом ссылок на сущность (EntityReference), например: «©». Список сущностей, регламентированных стандартами HTML 4.01 и XHTML 1.0, можно посмотреть по следующей ссылке: http://www.w3.org/TR/REC-html40/sgml/entities.html
Цвет
Определение цвета в CSS и HTML-атрибутах необходимо задавать в виде шестизначной последовательности шестнадцатиричных цифр, начинающейся со знака «#». Например «#fefefe». Здесь первая пара цифр означает количество красного цвета, вторая – зеленого, и третья – синего. Например, последовательность «#00ff00» означает чистый зеленый цвет, потому, что количество красного и синего равно нулю, а зеленый задан по максимуму, т.е. «ff».
Вместо текстовых эквивалентов цветов, предпочтительнее использовать вышеупомянутый формат, т.е. «#ffffff» вместо «white» и т.д.
Существует также сокращенная форма записи цветов, когда каждая составляющая цвета представлена комбинацией одинаковых шестнадцатиричных цифр. Например белый цвет может быть представлен как «#fff», а зеленый «#0f0». Предпочтение всегда нужно отдавать сокращенной форме записи.
Для упрощения работы с цветом при составлении и редактировании документов, рекомендуется использовать утилиту DotColor, описанную в разделе 3.4.
Комментарии
Для упрощения работы стороннего лица с HTML-документом иногда возникает необходимость разделения его смысловых блоков используя узлы комментариев. При помощи комментариев имеет смысл разделять такие блоки, как например заголовок, навигация, нижний колонтитул и пр. Как правило, эти фрагменты кода отмечают парой комментариев – начало блока и конец. Весьма разумным является отметка при помощи комментариев повторяющихся фрагментов кода, которые, возможно, в будущем будут генерироваться автоматически. Однако, не стоит злоупотреблять использованием комментариев, так как это приведет к усложнению читаемости кода и его редактирования. Рассмотрим пример использования узла комментария для разделения смысловых блоков документа:
Образец комментированного блока
<!-- navigation start -->
<ul id=”navigation”>
…
</ul>
<!-- navigation end -->
Как видно из примера, комментарии должны содержать информацию о том, что это за блок (navigation), где он начинается (start) и где заканчивается (end).
При работе с иностранными клиентами, комментарии ни в коем случае не должны содержать русскоязычные названия и аббревиатуры, желательно вообще избегать русскоязычных комментариев. Текст комментариев должен быть только на английском языке!