- •Учебный Курс по 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- фильтров.
Правила для css
Правила для оформления CSS-кода предельно просты и не отличаются особой изысканностью. Вот пример типичного фрагмента CSS:
Образец записи CSS
#navigation a:hover {
border-top: 1px solid #fff;
background: #f60 url(bg-arrow.gif);
}
Запись селектора следует начинать с новой строки, завершать ее открывающей фигурной скобкой. Каждое CSS свойство должно начинаться с новой строки с отступом и обязательно заканчиваться точкой с запятой, даже если это свойство последнее в блоке. В качестве отступа следует использовать символ табуляции. Блок обязательно завершается закрывающей фигурной скобкой с новой строки. Между CSS блоками желательно делать отступ в одну строку, но не более. Там где это необходимо, можно добавлять комментарии для выделения отдельных смысловых фрагментов CSS кода. Блок комментариев в CSS начинается с символов «/*» и заканчивается «*/».
Комментарии в CSS
/* navigation styles */
#navigation a:hover {
border-top: 1px solid #fff; /* top border definition */
background: #f60 url(bg-arrow.gif); /* background styles */
}
Помимо этих простых правил существуют еще несколько рекомендаций относительно того, как следует называть классы, идентификаторы и файлы изображений фона. Согласно стандарту, имена классов и идентификаторов чувствительны к регистру, соответственно такие классы как MyClass и myclass являются двумя разными классами. Тем не менее, различные браузеры подобные различия могут понимают по-своему, поэтому, во избежание путаницы, имена классов и идентификаторов следует писать в нижнем регистре, а их составные части разделять знаком минус «-». Например:
Не рекомендуется:
#NavigationBar{…}
.NavigationList{…}
Рекомендуется:
#navigation-bar{…}
.navigation-list{…}
Что касается имен файлов для изображений, и любых других файлов, то их следует называть в нижнем регистре. Это связано с тем, что большинство хостинг провайдеров предоставляют серверы на основе Unix/Linux-системы, которые чувствительны к регистру имени файла. Если, например, вы назовете имя файла «MyPicture.jpg», а в CSS сошлетесь на него в нижнем регистре:
КомментариивCSS
/* navigation styles */
#navigation a:hover {
border-top: 1px solid #fff; /* top border definition */
background: #f60 url(bg-arrow.gif); /* background styles */
}
На Windows-платформе вы не ощутите разницы, все будет прекрасно работать, картинка будет отображаться. Но когда вы поместите ваш код на сервер, то наиболее вероятно то, что система просто не найдет нужный файл, а именно «mypicture.jpg».
Все названия имен файлов и классов CSS должны быть смысловыми и тщательно подобраны таким образом, чтобы они отражали суть данного объекта. При работе с иностранными клиентами, комментарии, идентификаторы, имена классов и файлов ни в коем случае не должны содержать русскоязычные названия и аббревиатуры!
Основные правила для JavaScript
В данной главе мы не будем подробно рассматривать все правила форматирования для JavaScript, а ограничимся только лишь основными общими правилами, которые, впрочем, присущи любому языку программирования. Рассмотримпример:
ПримеркодаJavaScript
function initPage()
{
var nav = document.getElementById("navigation-top");
if (nav)
{
var nodes = nav.getElementsByTagName("li");
for (var i = 0; i < nodes.length; i++)
{
nodes[i].onmouseover = function ()
{
this.className += " hover";
}
nodes[i].onmouseout = function ()
{
this.className = this.className.replace(" hover", "");
}
}
}
}
if (window.attachEvent && !window.opera)
window.attachEvent("onload", initPage);
Определение функции начинается с новой строки. В качестве отступов используются табуляции. Открывающая и закрывающая фигурные скобки расположены на одном уровне, чтобы четко видеть начало и конец блока. Параметры функции разделены запятой и символом пробела. Оператор присваивания «=» и операторы арифметических операций выделены пробелами. Все имена функций и переменных начинаются с маленькой буквы и имеют смысловые названия. Локальные переменные описаны с помощью оператора «var». Общий смысл форматирования JavaScript кода заключается в том, чтобы сделать этот код как можно более понятным и доступным для редактирования.
Cascading Style Sheet
Данная глава описывает основные темы Cascading Style Sheet (CSS), на которые следует обратить внимание, и о которых должен знать каждый профессиональный HTML-разработчик. Описанные здесь сведения о CSS не предендуют на полноту изложения всех его возможностей и перечня всех существующих свойств. Напротив, здесь изложены обобщенные сведения, логически сгруппированные.