- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 10. Карта сайта. 41
- •Тема 11. Таблицы стилей. 45
- •Введение.
- •Тема 1. СтруктураHtml-документов.
- •1.1. Границы документа.
- •1.2. Заголовок документа.
- •1.3. Тело документа.
- •Тема 2. ФорматированиеHtml-документов.
- •2.4. Предварительно отформатированный текст.
- •Тема 3. Форматирование текстаHtml-документов.
- •3.1. Логическое форматирование.
- •3.2. Физическое форматирование.
- •Тема 4. Использование графики вHtml-документах.
- •4.1. Выбор формата графического файла.
- •4.2. Вставка изображения в документ.
- •Тема 5. Ссылки вHtml-документах.
- •5.1. Гипертекст и гипермедиа.
- •5.2. Создание ссылок на документы и файлы.
- •5.3. Ссылки внутри документа.
- •Тема 6. Списки в html-документах.
- •6.6. Дополнительные возможности форматирования списков.
- •Тема 7. Таблицы вHtml-документах.
- •7.1. Основы построения таблиц.
- •7.2. Создание сложной таблицы.
- •7.3. Альтернативные способы представления табличных данных.
- •Тема 8. Кадры (фреймы) вHtml-документах.
- •8.1.Основы создания кадров.
- •8.2. Модификация внешнего вида кадров.
- •8.3. Организация ссылок в кадрах.
- •Тема 9. Формы вHtml-документах.
- •9.1. Что такое формы.
- •9.1.1. Типы управляющих элементов
- •9.2. Работа с формами.
- •9.3. Разработка форм.
- •9.3.1. Элемент input.
- •9.3.2. ЭлементButton.
- •9.3.3. Элементы select, optgroup и option
- •9.3.4. Заранее выбранные варианты
- •9.3.5. ЭлементTextarea
- •9.3.6. Метки.
- •9.3.6.1. Элемент label.
- •9.3.7. Переход фокуса на элемент.
- •9.3.7.1.Переход с помощью клавиши Tab.
- •9.3.7.2. Клавиши доступа.
- •9.3.8.Отправка формы.
- •9.3.8.1. Метод отправки формы.
- •9.3.8.2. Успешные управляющие элементы.
- •9.3.9.Обработка данных формы.
- •Тема 10. Карта сайта.
- •Тема 11. Таблицы стилей.
- •11.1. Псевдоклассы и псевдоэлементы:
- •11.2. Краткое описание языка css.
- •11.3. Некоторые хитрости управления стилями.
- •Приложение 1.Цвета.
5.2. Создание ссылок на документы и файлы.
<A HREF=”адресная часть” title=”подсказка читателю”>Указатель</A>
Адресная часть указывает браузеру, на какой документ или место в документе организована ссылка.
Указатель отображается на экране и служит для указания на ссылку.
Тэг <BASEHREF> - указывает базовый адрес, относительно которого построена вся адресация.
Типы ссылок: http://www.primer.ru
ftp://ftp.mysite.com
mailto:me@me.com
file:///path\file.ext
5.3. Ссылки внутри документа.
Для задания ссылки внутри документа необходимо определить закладку, на которую будет происходить ссылка. Это осуществляется указанием атрибута NAME в тэге якоря. Ссылка на закладку осуществляется стандартным образом.
Пример:
<html>
<head>
<title>Primer</title>
</head>
<body bgcolor="NAVY">
<p align="center">
<marquee>Houdy! This is proba!!!</marquee>
</p>
<p> <a href ="#proba"> Ссылка на закладку под именем proba.</a> </p>
<FONT FACE="ARIAL" SIZE="2" COLOR="YELLOW">
<p>Просто какой-то текст.</p>
<p>Просто какой-то текст.</p>
<p>Просто какой-то текст.</p>
<p>Просто какой-то текст.</p>
<a name ="#proba"> На этот текст осуществляется внутренняя ссылка.</p>
</body>
</html>
Тема 6. Списки в html-документах.
6.1. Упорядоченный (нумерованный) список.
<ol>
<lh>Заголовок списка
<li>1-й элемент списка
…
<li>i-й элемент списка
</ol>
Вложенный список:
<ol>
<lh>Заголовок списка
<li>1-й элемент списка
<ol>
<li>
<li>
</ol>
<li>i-й элемент списка
</ol>
6.2. Неупорядоченный (маркированный) список.
<ultype=(square,circle,disc)>
<lh>Заголовок списка
<li>1-й элемент списка
…
<li>i-й элемент списка
</ul>
6.3. Меню.
<menu>
<lh><em>Planets of the Solar System:</em><br>
<li><a href=”mercury.htm”>Mercury</a>
<li><a href=”venus.htm”>Venus</a>
<li><a href=”earth.htm”>Earth</a>
<li><a href=”mars.htm”>Mars</a>
<li><a href=”jupiter.htm”>Jupiter</a>
<li><a href=”saturn.htm”>Saturn</a>
<li><a href=”uranus.htm”>Uranus</a>
<li><a href=”neptune.htm”>Neptune</a>
<li><a href=”pluto.htm”>Pluto</a>
</menu>
6.4. Список определений.
Глоссарий (список определений). Состоит из определяемого термина и абзаца, раскрывающего его значение. Удобен для составления каталога.
<dl>
<dt>Термин (слово)
<dd>Определение (описание) термина
</dl>
6.5. Комбинированные списки.
Бывают случаи, когда в список одного типа требуется включить список (списки) другого типа. Например:
<html>
<head>
<title>Пример комбинированного списка</title>
</head>
<body>
<ol>
<lh><em>Planets of the Solar System</em><br>
<li>Mercury
<ul>
<ul>
<li>Roman god of commerce and travel
<li>Dictionery Definition
<dl>
<dt>Mercury
<dd>The smallest of the planets and the one nearest the sun.
</dl>
</ul>
</ul>
<li>Venus
<ul>
<ul>
<li>Roman goddess of love and beauty
<li>Dictionery Definition
<dl>
<dt>Venus
<dd>The second planet from the sun.
</dl>
</ul>
</ul>
</ol>
</body>
</html>
6.6. Дополнительные возможности форматирования списков.
Для организации неупорядоченного списка можно использовать собственные маркеры (например, рисунки). Тогда вместо тэга <li> необходимо вставить код маркера, например:
<ul>
<img src=”cube.gif” align=”center”> Red<br>
<img src=”cube.gif” align=”center”> Blue<br>
<img src=”cube.gif” align=”center”> Green<br>
</ul>