- •Введение
- •1. Элементы языка html
- •Теги форматирования текста
- •Гиперссылки
- •Встраивание графических изображений
- •Создание таблиц
- •2. Каскадные таблицы стилей
- •Селекторы элементов
- •Селекторы классов
- •Селекторы идентификаторов
- •Единицы измерения, принятые в каскадных таблицах стилей
- •Внешние каскадные таблицы стилей
- •Задание цвета в каскадных таблицах стилей
- •3. Формы
- •Элементы управления формы
- •4. Разработка Web-сайта электронного магазина Планирование сайта
- •Задачи и информационное содержание сайта
- •Макеты страниц
- •Макет страницы можно выполнить с помощью обычного текстового редактора. На рис. 4.4 представлен результат такой работы.
- •Логическая структура сайта
- •Обозреватель преобразует данный html-код к следующему виду:
- •Для формирования стиля заголовка страницы воспользуемся селектором класса:
- •Для формирования стиля нижней части страницы воспользуемся селектором класса:
- •Заключение
- •Список литературы
Гиперссылки
Гиперссылка – это один из основных элементов HTML-документа. Она состоит из двух частей: указателя и адресной части (url). Указатель (Anchor) виден на Web-странице. Адресная часть скрыта в документе. Однако именно она сообщает обозревателю о том, к какой Web-странице следует получить доступ.
Формат гиперссылки таков:
<a href=”url”> указатель </a>
Буква a (имя тега) – первая буква слова Anchor – указатель.
Аббревиатура href происходит от словосочетания Hypertext REFerence – гипертекстовая ссылка.
В качестве указателя может выступать группа слов, символов или рисунок. Таким образом, указатели можно разделить на два вида – текстовые и графические. Текстовые указатели в окне обозревателя выглядят как подчеркнутое слово или группа слов.
Адресная часть ссылки (url) – это обычно адрес Web-страницы, которую обозреватель должен загрузить, после щелчка по данной ссылке.
Списки
Списки являются одной из типичных форм представления данных в электронных документах.
Для оформления текста в виде списка требуется пара тегов, указывающих на тип списка, и парные теги, отвечающие за каждый элемент списка. Рассмотрим в качестве примера следующий список:
Весна
Лето
Осень
Зима
Тип такого списка называется нумерованным. Чтобы создать нумерованный список, соответствующий текст обрамляется парой тегов <ol> и </ol>, для обозначения элементов списка используются теги <li> и </li>.
Запишем код HTML для создания приведенного выше примера нумерованного списка.
<ol>
<li>Весна</li>
<li>Лето</li>
<li>Осень</li>
<li>Зима</li>
</ol>
Теги <ul> и </ul> указывают на тип маркированного списка. Например, списку:
Бытовая техника
Товары для офиса
соответствует следующий код HTML:
<ul>
<li> Бытовая техника </li>
<li> Товары для офиса </li>
</ul>
Встраивание графических изображений
Существует большое количество графических форматов, в которых сохраняются графические данные. Однако при формировании Web-страниц используются в основном два графических формата: GIF и JPEG. Это обусловлено тем, что эти форматы сохраняют графику в сжатом виде, и степень такого сжатия довольно высокая.
Графические данные, сохраняемые в формате GIF, ограничиваются 256 цветами. Поэтому этот формат не совсем подходит для хранения качественных цветных фотографий, а более подходит для хранения более простых рисунков.
Для хранения фотографий обычно используется формат JPEG. Графические данные, сохраняемые в этом формате, могут содержать до 224 цветов.
Рисунки, и другие графические изображения, которые должны быть размещены на Web-страницах, всегда хранятся в файлах отдельно от, описывающего эту страницу, HTML-кода. Для встраивания рисунка в HTML-документ, следует использовать автономный тег <img>. Формат тега имеет вид:
<img src=”url”>
Предположим, требуется вставить в HTML-документ рисунок, сохраняемый в графическом файле с именем рис3.jpg, который хранится в папке images, размещенной, в свою очередь, в той же папке, что и сам HTML-документ. Тогда в документе должна присутствовать следующая строка:
<img src=”images/рис3.jpg”>