- •1. Структура web-документа. Вставка комментария.
- •2. Текст - логика и физика..
- •3. Форматирование Web-документа
- •Теги физического форматирования текста.
- •Логическая разметка текста.
- •Теги логического форматирования текста.
- •Полезные советы:
- •4. Организация ссылок. Правила записи ссылок Организация ссылок
- •Правила записи ссылок
- •Ссылки на документы различных типов
- •Ссылки на другие ресурсы Интернета
- •5. Списки нумерованные и маркированные. Списки определений Создание списков html страницы
- •Нумерованный список html страницы
- •Маркированный список html страницы
- •Многоуровненвый список html страницы
- •Списки определений html страницы
- •7. Встраивание изображений в web-документ. Выравнивание изображений. Задание размеров выводимого изображения. Отделение изображения от текста. Альтернативный текст
- •Выравнивание изображений.
- •Задание размеров выводимого изображения.
- •Отделение изображений от текста.
- •Рамки вокруг изображений.
- •Альтернативный текст.
- •8. . Использование изображения в качестве ссылки. Баннеры.
- •9. Графические форматы для web-документа
- •10. Таблицы. Создание простейших таблиц. Представление таблиц на странице.
- •11.Форматирование данных внутри таблицы.
- •12. Вложенные таблицы.
- •13. Объединение ячеек таблицы по горизонтали и по вертикали.
- •Объединение ячеек html таблицы по вертикали
- •14. Особенности построения таблицы. Отображение пустых ячеек в таблице. Выравнивание данных в столбцах таблицы Особенности построения html таблиц
- •Выравнивание данных в столбцах html таблицы
- •15. Фреймы. Сферы применения фреймов.
- •Сферы применения фреймов
- •16. Правила описания фреймов.
- •17. Особенности навигации при использовании фреймов. Взаимодействие между фреймами. Различие между фреймами и окнами браузера.
- •Взаимодействие между фреймами в html
- •18. Плавающие фреймы. Варианты их использования.
- •19. Карты-изображения. Графическое представление карты-изображения. Описание конфигурации карты-изображения. Средства создания карты-изображения.
- •20. Каскадные таблицы стилей. Встраивание таблицы стилей в документ.
- •21. Группирование и наследование.
- •22. Селекторы. Селектор class и Селектор id.
- •Пример 2. Использование классов c тегами
- •Пример 3. Использование классов c тегами
- •Теги Span и Div
- •Пример 2. Использование тега div
- •Селекторы id Параметр id задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически. Синтаксис id селектора следующий.
- •Пример 3. Использование идентификатора id
- •23. Примеры применения контекстных селекторов.
- •24. Псевдоклассы. Псевдоклассы связей.
- •25. Модель форматирования. Блоковые элементы. Встроенные элементы.
- •26. Стилевые свойства форматирования текста.
- •27. Стилевые свойства для цвета и фона.
- •28. Блоки. Визуальное форматирование
- •2 9. Абсолютное, относительное и статическое форматирование.
- •30. Отображение списков.
8. . Использование изображения в качестве ссылки. Баннеры.
Кроме контента, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a href=...> и </a>, как показано в примере 1.
Пример 1. Создание рисунка-ссылки
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ссылка</title> </head> <body> <p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" alt="Пример"></a></p> </body> </html>
Параметр href тега <A> задает путь к файлу, на который указывает ссылка, а src тега <IMG> — путь к графическому файлу. Вокруг Имаги-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом контентовых ссылок. Чтобы убрать рамку, следует у тега <IMG> установить параметр border="0" (пример 2).
Пример 2. Удаление рамки вокруг Имаги
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ссылка</title> </head> <body> <p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" border="0" alt="Пример"></a></p> </body> </html>
Можно также применить CSS (ЦСС), чтобы убрать рамку для всех рисунков, которые являются ссылками. Для этого применяется стилевой параметр border cо значением none (пример 3).
Пример 3. Использование CSS (ЦСС)
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ссылка</title> <style type="text/CSS (ЦСС)"> A IMG { border: none; } </style> </head> <body> <p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" alt="Пример"></a></p> </body> </html>
Конструкция A IMG определяет конконтент применения стилей — только для тега <IMG>, который находится внутри контейнера <A>. Поэтому Имаги в дальнейшем можно использовать как обычно — с рамкой или без.
9. Графические форматы для web-документа
Возможность использования графики трудно переоценить. Без иллюстраций документ однообразен, вял и скучен. Расчётливо подобранная и правильно размещенная графика делает его визуально привлекательнее и, что самое важное, передаёт одну из основных идей документа. Вспомните старое правило - лучше один раз увидеть, чем сто раз услышать (данном случае прочитать). Принимая решение о целесообразности включения в документ тех или иных иллюстраций нужно иметь в виду следующие.
Графические файлы могут иметь значительные размеры, что требует времени для их загрузки. Насыщенность графикой может привести к недопустимо большим затратам времени, требуемым для получения документов, особенно, если используется соединение с помощью модема на небольших скоростях. С другой стороны, одновременная работа нескольких пользователей с большими документами, размещёнными на вашем сервере, может также привести к его перегрузке.
Многие пользователи работают в режиме отключения приёма графических изображений для увеличения скорости передачи данных. В этом случае от полученных докуметов остаётся только текстовая часть, которая должна давать информацию о содержательной стороне документа.
Поисковые системы не могут индексировать графику. Поэтому если на ваших страницах расположены только иллюстрации без текстовых пояснений, то читатели, использующие современные методы поиска, такие страницы не обнаружат.
Следует помнить, что пользователи могут работать с различными расширениями экрана монитора и различной глубиной цвета. Страницы хорошо смотрящиеся при одном расширении, могут выглядеть совершенно по иному при другом расширении.
Способы хранения изображений.
Рассматривая изображения на экране монитора, вы на самом деле видете большое количество разноцветных точек (пикселов), которые, будучи собранными вместе, образуют некую картинку. Существует много способов описания графической информации, соответственно имеется значительное количество форматов хранения графических файлов, - порядка нескольких десятков. На Web-страницах в подавляющем большинстве случаев используется графика в двух форматах: GIF и JPG. Эти два формата поддерживаются почти всеми браузерами.
Формат BMP является стандартом MS Windows и поддерживается браузером Internet Explorer, однако его употребление не может быть рекомендовано, так как данный формат не поддерживает сжатие данных. Разработанный недавно формат PNG был призван заменить формат GIF, однако, несмотря на его очевидные преимущества, должного распространения на настоящий момент не получил. Иные графические форматы (кроме GIF и JPG) в HTML-документах на WWW-серверах практически не встречаются, хотя принципиально это возможно. Использование других форматов не рекомендуется по следующим причинам: во-первых, только для GIF и JPG осуществляется встроенная поддержка в большинстве браузеров, тогда как для иных файлов необходимо подключение внешних программ отображения, во-вторых, структура файлов GIF и JPG наиболее подходит для передачи данных по сети и является независимой от платформы. В общем, изображения на Web-страницах могут использоваться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного документа, и изображения, встраиваемые в документ.