- •Учебный Курс по 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-документов. Как результат правильного форматирования, мы получаем доступный для понимания и легкий для редактирования HTML-код. От того, насколько правильно оформлен документ, также зависит скорость поиска и устранения ошибок. Поэтому убедительная просьба всем читающим – внимательно отнеситесь к данной главе.
Отступы
В HTML-документе отступы, играют немаловажную роль. В соответствии с иерархической структурой документов, отступы показывают уровень вложенности элементов, а это, в свою очередь, дает дополнительную информацию тому, кто редактирует документ. Никогда не стоит пренебрегать корректировкой отступов даже в случае незначительных изменений в документе. На вопрос «Чем лучше делать отступы, пробелами или табуляцией?», существует вполне однозначный ответ – табуляцией. Во-первых, потому, что в случае пробела вам придется использовать как минимум два символа пробела и соответственно два байта (в общем случае) на один «символ» отступа, вместо одного байта для табуляции. Пробельные символы отступа у вас будут занимать в несколько раз больше памяти, чем те же отступы с табуляцией, а для веб-документов, как известно, размер имеет критическое значение. Во-вторых, у разных людей есть разные привычки относительно того, сколько пробелов они ставят для отступа: два, три и т.д. Поэтому, правило номер один для отступов – используйте табуляцию вместо пробелов.
Идея отображения иерархической вложенности элементов также должны быть понятна. Например, если тело документа (элемент body) содержит элемент div внутри себя, а тот, в свою очередь, содержит изображение (элемент img), то это отображается так, как показано в примере:
Отображение иерархической вложенности
<body>
<div>
<img src=”mypic.jpg” />
</div>
</body>
Элементы и атрибуты
При создании любого HTML-документа, хорошим тоном следует считать написание тегов элементов в нижнем регистре. Это позволит вам, во-первых, выработать правильную привычку и избежать недоразумений при редактировании чужих (предположительно правильно оформленных) документов. Более того, таково требование XHTML, поскольку этот стандарт подразумевает написание элементов именно в нижнем регистре.
Избегайте ненужных пробелов внутри тегов, особенно в случае отсутствия атрибутов.
Все значения атрибутов необходимо брать в двойные кавычки, причины для этого те же самые: правильная привычка и соответствие стандартам. Будьте внимательны, и не забывайте разделять пары атрибут-значение символом пробела; и в то же время избегайте лишних пробелов между атрибутами, а также в их значениях.
Переносы
Здесь мы рассмотрим целесообразность использования переносов строк в HTML-документе, включая два общих случая: перенос элемента и перенос внутри элемента.
Перенос элемента
Перенос элемента в согласовании с отступом (см. 4.2.1) помогает правильно отобразить иерархическую структуру в HTML. Для простоты чтения и понимания кода не рекомендуется ставить более двух элементов в одной строке. Рассмотрим пример:
Три элемента в одной строке
<table>
<tr><td><a href=”#”>link</a></td></tr>
</table>
Таких конструкций следует избегать, а вместо них использовать следующую:
Правильное использование переносов
<table>
<tr>
<td><a href=”#”>link</a></td>
</tr>
</table>
То же самое касается элементов, не вложенных друг в друга.
Обратите внимание, что мы оставили два элемента td и a в одной строке и не стали их разбивать. Дело в том, что чрезмерное увлечение переносами элементов не добавит ясности в код, а скорее затруднит чтение. Все хорошо в меру.