- •Учебный Курс по 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-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Полезные plug-in’ы.
В данном разделе перечислены полезные модули для браузеров, которые помогут вам в работе. Необязательно устанавливать их все, достаточно выбрать самые подходящие и использовать их.
Для Firefox (Mozilla)
Web Developer Toolbar (https://addons.mozilla.org/firefox/60/)

Линейка с разнообразными инструментами для разработчика.
Позволяет: разрешать/запрещать поддержку cookies и JavaScript, смотреть и редактировать CSS, просматривать и менять скрытые элементы форм, проверять сайт на соответствие стандартам, тестировать на различных размерах окна браузера, проверять результирующие свойства блоков.
Firebug (https://addons.mozilla.org/firefox/1843/)

Позволяет контролировать и редактировать Javascript, CSS и HTML (в том числе и динамически сгенерированный), смотреть значения в CSS, следить за сетевой активностью и порядком загрузки страницы с отслеживанием задержек, облегчает отладку JavaScript, имеется DOM-инспектор.
IE View (https://addons.mozilla.org/ru/firefox/addon/1429) и Opera View (https://addons.mozilla.org/ru/firefox/addon/1190).
Открывают активную страницу в соответствующем браузере. Упрощает отладку страниц в разных браузерах.
Chickenfoot (http://groups.csail.mit.edu/uid/chickenfoot/)

Это расширение, которое встраивает минисреду программирования на боковой панели, так что вы сможете писать простенькие скрипты, чтобы управлять страницами и автоматизировать процесс веб-браузинга. Скрипты в Chickenfoot это обычные JavaScript с рядом дополнительных функций, заточенных под веб-задачи (открыть урл, ввести строку в input, кликнуть по кнопке и много других).
При нажатии F8 на боковой панели появляется редактор, позволяющий писать простенькие сценарии, как, например, скрипт автоматического заполнения форм, end-to-end тестирование поведения сайта, изменения исходного кода страницы, перехода по ссылкам, все это может быть запрограммировано (можно составить из истории ваших действий).
Для Internet Explorer
Internet Explorer Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#Overview)

IE-аналог Web Developer Toolbar для FireFox.
Instant Source
Instant Source – это плагин для Internet Explorer, который позволяет увидеть реальную структуру документа, загруженного в браузер, или конкретного элемента под курсором мыши (в зависимости от настроек). Недостатком данной программы является то, что он отображает не исходный HTML-код, а код сгенерированный браузером. Поэтому о форматировании тут речи быть не может, однако можно оценить структуру документа, что само по себе очень полезно во многих случаях, особенно когда документ генерируется динамически. Скачать модуль можно отсюда: http://www.blazingtools.com
Оформление документов – корпоративный стиль Правила именования папок и файлов
Внутри каждой корпорации существуют некоторые правила оформления и ведения документов, а также именования папок. Здесь мы рассмотрим некоторые правила, которые следует соблюдать по умолчанию во избежание беспорядка.
Расширение HTML- или XHTML-файлов должно быть .html.
Имена CSS-файлов должны соответствовать media-области их применения: all.css, screen.css, print.css и т.п. Список возможных media представлен в
Файлы, содержащие команды SSI (см http://ru.wikipedia.org/wiki/SSI_(программирование)) должны иметь расширение .shtml, вне зависимости от того вставляются ли сами эти файлы командой #include или нет, в противном случае SSI-команды, в зависимости от настройки сервера, могут быть неправильно обработаны сервером.
Расширения файлов внедряемых командой #include находящиеся в папке inc могут иметь расширения .inc, .tpl или другие в зависимости от их назначения.
Имя корневой папки должно соответствовать имени проекта. Например: MyProject.
Изображения хранятся в папке images. CSS – в css. JavaScript – в js. Flash элементы – в swf.
Имя корневой папки c SSI-версией должно соответствовать имени проекта с добавлением ssi. Например: MyProject-ssi.
Пример структуры папок:

