- •Учебный Курс по 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-страницы, вам нужно обзавестись (если вы этого еще не сделали) несколькими версиями современных браузеров. Для этого подойдут браузеры Internet Explorer 6 и выше, последние версии браузеров Mozilla Firefox, Opera и Safari (этот браузер доступен только для Mac). Любые другие браузеры, которые поддерживают современные стандарты W3C тоже подойдут. Какое-нибудь мобильное устройство с доступом в Интернет и браузером также будет весьма полезным, например мобильный телефон или карманный компьютер.
Запустите один из перечисленных браузеров и откройте ссылку, приведенную ниже.
<Ссылка на пример современной HTML-страницы>
Если вы все сделали правильно, то вашему взору предстала страница, которую мы попытаемся исследовать.
То, что вы видите, это результат одновременной работы HTML и CSS. Откройте эту же ссылку в других браузерах, которые у вас имеются. Если пример действительно удачный, то он отображается одинаково во всех браузерах.
Теперь давайте попытаемся просмотреть этот же документ без CSS и увидеть, будет ли нам понятен его смысл? Для этого лучше всего воспользоваться браузером Mozilla Firefox. Откройте ссылку в Firefox а затем выберите пункт меню «Вид» → «Стиль страницы» → «Без стилей». Если у вас мобильный телефон с браузером не поддерживающим CSS, то вы можете открыть эту ссылку в нем. Эффект будет почти тот же самый, что и в обычном браузере с выключенным CSS.
Мы отключили CSS, и страница изменила свой вид. Но потерялся ли при этом ее смысл? Если сейчас вы можете отличить заголовок от параграфа, а также выделить другие смысловые элементы, то это означает, что документ составлен грамотно с точки зрения семантики. Мы потеряли дизайн и всю красоту страницы, но зато сохранился ее смысл и та информация, которую она несет.
Следующим шагом давайте убедимся, соответствует ли данный документ спецификации W3C, указанной в его DOCTYPE? Для этого откройте страницу W3C валидатора, находящуюся по адресу http://validator.w3.org/ Затем введите адрес ссылки на рассматриваемый пример в поле «Address» формы «Validate by URL» и нажмите кнопку «Check».
Надпись «This Page Is Valid XHTML 1.0 Strict!» на зеленом фоне означает, что этот документ действительно соответствует спецификации указанной в его DOCTYPE и не содержит ошибок.
Давайте посмотрим на HTML-код примера изнутри и проверим, действительно ли он настолько прост, каким должен быть? Для этого откройте окно с исходным HTML-кодом данной страницы, выбрав соответствующий пункт в меню браузера. В Internet Explorer это делается при помощи выбора меню «Вид» → «Просмотр HTML-кода», а в Firefox «Вид» → «Исходный код страницы».
Внимательно просмотрите HTML-код данного примера. Достаточно ли он прост на ваш взгляд, принимая во внимание исходный дизайн страницы? Что вы можете сказать по поводу семантики? Не перегружен ли код лишними элементами и классами? Что вы можете сказать о последовательности смысловых блоков в документе?
Теперь попытайтесь еще несколько раз включить и выключить CSS для того, чтобы лучше ощутить влияние CSS на HTML-документ. Откройте CSS и убедитесь, что все свойства отображения данного документа находятся в нем. Для этого введите в поле адреса браузера следующую строку: <Ссылка на пример CSS >
Проверим этот CSS-файл на соответствие стандартам W3C. Для этого откройте адрес CSS валидатора: http://jigsaw.w3.org/css-validator/ Введите в поле «Address» формы «Validate by URI» ссылку на CSS или на HTML-документ и нажмите кнопку «Check».
Надпись «Congratulations!» означает, что тест пройден успешно, и что указанный CSS-файл не содержит ошибок и соответствует стандартам W3C.
Таковы основные операции по оценке веб-страницы. Как вы, наверное, убедились, приведенный здесь пример отлично справился со всеми тестами.