- •Учебный Курс по 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 filter> tag{…}
Например:
* html div{…}
IE 6 и ниже
* html или *html
Только IE 7
*:first-child+html или*+html
IE 7 и все современные браузеры
html>body {}
Все современные браузеры, кроме IE 7
html>/**/body {}
Opera 9 и выше
*:first-child+html или html:first-child
Safari и FireFox (CSS3)
body:last-child {}
Замечание: под современными браузерами понимаютсяFirefox2.0 и выше,Opera9.0 и выше,Safari2.0.2 и выше.IE6 к их числу не относится.
Также существует постоянно обновляемая таблица CSS-фильтров: http://thomas.tanreisoftware.com/css_filters/huzzah.html
Практическая верстка
Основые тэги, используемые при верстке HTML-документов:
Основые тэги, используемые при верстке HTML-документов
<!DOCTYPE html PUBLIC "..."><!-- указание типа стандарта -->
<html><!-- начало документа -->
<head><!-- заголовок документа -->
<title><!-- заголовок страницы --></title>
<meta content=""/><!-- meta информация -->
<style type="text/css"><!-- стилевая разметка, внутренний CSS --></style>
<link type="text/css" href="#"/><!-- подключение внешнего файла (CSS) -->
<script type=""><!-- скрипт --></script>
</head><!-- конец заголовка документа -->
<body><!-- начало тела -->
<h1><!-- Заголовок первого уровня --></h1>
<h2><!-- Заголовок второго уровня --></h2>
<h3><!-- Заголовок третьего уровня --></h3>
<h4><!-- Заголовок четвертого уровня --></h4>
<h5><!-- Заголовок пятого уровня --></h5>
<h6><!-- Заголовок шестого уровня --></h6>
<pre><!-- предварительно форматированный блок --></pre>
<p><!--абзац-->
<a><!-- ссылка--></a>
<strong><!-- полужирный--></strong>
<em><!-- наклонный--></em>
<big><!-- большойтекст--></big>
<small><!-- маленький текст --></small>
<sub><!-- нижний индекс --></sub>
<sup><!-- верхний индекс --></sup>
<cite><!-- цитата --></cite>
<span><!-- текстовый блок --></span>
<br/><!-- принудительный перенос строки -->
</p><!-- конец абзаца -->
<div><!-- блок (блочного типа) -->
<object><!-- вставка объекта, как правило работающего через plugin -->
<embed><!-- то же самое, но для некторых браузеров --></embed>
</object><!-- конец объекта -->
<img alt="" src="#"/><!-- изображение -->
</div><!-- конец блока (блочного типа) -->
<ul><!-- ненумерованный список -->
<li><!-- элемент списка --></li>
</ul><!-- конец ненумерованного списока -->
<ol><!-- нумерованный список -->
<li><!-- элемент списка --></li>
</ol><!-- конец нумерованного списока -->
<dl><!-- список определений -->
<dt><!-- определение --></dt>
<dd><!-- содержание --></dd>
</dl><!-- конец списока определений -->
<table><!-- таблица -->
<tr><!-- строка таблицы -->
<th><!-- ячейка заголовка таблицы --></th>
</tr><!-- конец строки таблицы -->
<tr><!-- строка таблицы -->
<td><!-- ячейка таблицы --></td>
</tr><!-- конец строки таблицы -->
</table><!-- конец таблицы -->
<form action=""><!-- форма -->
<div><!-- блок (блочного типа) -->
<fieldset><!-- блок полей ввода -->
<legend><!-- заголовок блока полей ввода --></legend>
<label><!-- ярлык поля ввода --></label>
<input/><!-- поле ввода -->
<textarea><!-- многострочное поле ввида --></textarea>
<select><!-- плеввода типа "выпадающий список" -->
<option><!-- элемент выпадающего списка --></option>
</select>
</fieldset><!-- конец блока полей ввода-->
</div><!-- конец блока (блочного типа) -->
</form><!-- конец форма -->
</body><!-- конец тела -->
</html><!-- конец документа -->