Инструментальные средства Internet-технологий. Лабораторный практикум
.pdf</table>
<p>
Как можно видеть, одна из ячеек не имеет рамки. Это потому, что она пустая. Попробуйте вставить в ячейку пробел.
Она по-прежнему не будет иметь рамки. </p>
<p>
Хитрость состоит в том, чтобы вставить в ячейку неразрывный пробел.
</p>
<p>Неразрывный пробел является символьным объектом. </p>
<p>Объект неразрывного пробела начинается с амперсанда («&”),
затем следуют буквы «nbsp”, и в конце стоит точка с запятой («;”)
</p>
<p>
</p>
</body>
</html>
Отступ от рамки до содержимого ячейки
<html>
<body>
<h4>Без отступа:</h4> <table border=”1”> <tr>
<td>Первая </td> <td>Строка</td>
</tr>
<tr>
<td>Вторая </td> <td>Строка</td>
</tr>
</table>
<h4>С отступом (cellpadding) :</h4> <table border=”1” cellpadding=”10”>
<tr> <td>Первая</td>
31
<td>Строка</td> </tr>
<tr> <td>Вторая</td> <td>Строка</td>
</tr>
</table>
</body>
</html>
Списки
HTML поддерживает упорядоченные списки, неупорядоченные списки, и списки определений. Отличаются эти разновидности списков лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
Неупорядоченные списки
Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).
Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.
<html>
<body>
<h4>Неупорядоченный список:</h4> <ul>
<li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li>
</ul>
</body>
</html>
Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.
Упорядоченные списки
Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинает-
32
ся с тега <li>. У тега <ol> может быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type
(определяет стиль нумерации пунктов). Может иметь значения: «A» – заглавные буквыA, B, C ...
«a» – строчные буквы a, b, c ...
«I» – большие римские числа I, II, III ...
«i» – маленькие римские числа i, ii, iii ...
«1» – арабские числа 1, 2, 3 ...
<html>
<body>
<h4>Упорядоченный список:</h4> <ol>
<li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li>
</ol>
</body>
</html>
Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.
Списки определений
Список определений не является списком элементов. Это список терминов и определений терминов.
Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка
начинается с тега <dd>.
<html>
<body>
<dl>
<dt>элемент 1</dt> <dd>описание элемента 1</dd> <dt>элемент 2</dt> <dd>описание элемента 2</dd> </dl>
</body>
</html>
Внутри определения списка определений (тег <dd> ) можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.
Рассмотрим некоторые примеры применения различных списков:
33
Различные типы упорядоченных списков
<html>
<body>
<h4>Список проектов с цифрами:</h4> <ol>
<li>msmu.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
<h4>Список с буквами:</h4> <ol type=”A”> <li>msmu.ru</li> <li>osp.ru</li> <li>file.ru</li>
</ol>
<h4>Список с буквами нижнего регистра:</h4> <ol type=”a”>
<li>msmu.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
<h4>Список с римскими цифрами:</h4> <ol type=”I”>
<li>msmu.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
<h4>Список с римскими цифрами в нижнем регистре:</h4>
<ol type=”i”> <li>msmu.ru</li> <li>osp.ru</li> <li>file.ru</li> </ol>
</body>
</html>
Различные типы неупорядоченных списков
<html>
<body>
<h4>Список со значком кругом:</h4> <ul type=”disc”>
<li>mggu.ru</li>
34
<li>osp.ru</li>
<li>file.ru</li>
</ul>
<h4>Список со значком окружностью:</h4> <ul type=”circle”>
<li>mggu.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>
<h4>Список со значком квадратом:</h4> <ul type=”square”>
<li>mggu.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>
</body>
</html>
Вложенный список
<html>
<body>
<h4>Вложенный список:</h4> <ul>
<li>элемент 1</li> <li>элемент 2</li>
<ul>
<li>элемент 2.1</li> <li>элемент 2.2</li> </ul>
<li>элемент 3</li> </ul>
</body>
</html>
<html>
<body>
<h4>Вложенный список:</h4> <ul>
<li>элемент 1</li> <li>элемент 2</li>
<ul>
<li>элемент 2.1</li> <li>элемент 2.2</li>
<ul>
35
<li>элемент 2.2.1</li> <li>элемент 2.2.2</li> </ul>
</li>
</ul>
</li>
<li>элемент 3</li> </ul>
</body>
</html>
Список определений
<html>
<body>
<h4>Список определений:</h4> <dl>
<dt>элемент 1</dt> <dd>описание элемента 1</dd> <dt>элемент 2</dt> <dd>описание элемента 2</dd>
</dl>
</body>
</html>
|
Теги списков |
Тег |
Описание |
<ol> |
Определяет упорядоченный список |
<ul> |
Определяет неупорядоченный список |
<li> |
Определяет элемент списка |
<dl> |
Определяет список определений |
<dt> |
Определяет термин определения |
<dd> |
Определяет описaние определения |
<menu> |
Не рекомендуется. Используйте вместо этого <ul> |
Эта лекция посвящена способам организации связей между ресурсами с помощью гипертекстовых ссылок. Рассматриваются способы разбивки окна браузера на несколько независимых частей.
Создание гиперссылок
Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег <a>, который называют «якорь» (аnchor).
36
Этот пример показывает, как создавать ссылки в документе HTML.
<html>
<body>
<p>
<a href=”page1.htm”>
Этот текст</a> является ссылкой на страницу на этом Web-сайте.
</p>
<p>
<a href=”http://www.msmu.ru/”>
Этот текст </a> является ссылкой на страницу во Всемирной Паутине.
</p>
</body>
</html>
Изображение в качестве ссылки
Этот пример показывает, как использовать в качестве ссылки изо-
бражение.
<html>
<body>
<p>
Можно также использовать в качестве ссылки изображение:
<a href=”http://www.mgu.ru/”>
<img border=”0” src=”logo.gif” width=”285” height=”52”>
</a>
</p>
</body>
</html>
Описание тега гипертекстовой ссылки
Якорь (аnchor) позволяет устанавливать связь с любыми ресурсами во Всемирной Сети: другую страницу HTML, изображение, звуковой файл, видеоклип, и т.д.
Синтаксис тега гипертекстовой ссылки:
<a href=”url”>текст ссылки</a>
При помощи атрибута href передается адрес документа, на кото-
рый указывает ссылка.
<a href=”http://www.msmu.ru/”>Добро пожаловать в Горный Университет</a>
37
Всегда добавляйте завершающую косую черту к ссылкам на вложенные папки. Если ссылка имеет следующий вид: href=”http://www. msmu.ru/help”, то будет создано два запроса HTTP к серверу, так как сервер добавит косую черту к адресу и создаст новый запрос следу-
ющего вида: href=”http://www.msmu.ru/help/”. При этом вызове об-
ращение обычно происходит к странице index.htm внутри папки help или к другому файлу – это зависит от настроек web-сервера.
Спомощью данного атрибута можно задавать ссылки не только по протоколу HTTP, но и по другим:
http://... – создает ссылку на файл, который может быть передан по протоколу http ;
ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
mailto: – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком «&»; news:.. – создает ссылку на конференцию сервера новостей;
wais://... – создает ссылку на WAIS – сервер; gopher://... – создает ссылку на Gopher – сервер;
Спомощью атрибута target можно определить, где будет открыт документ, на который указывает ссылка. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:
self – указывает, что определенный в параметре href документ должен отображаться в текущем фрейме;
parent – указывает, что документ должен отображаться во фреймеродителей текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее frameset, включающий текущий фрейм;
top – указывает, что документ должен отображаться в окне-родите- ле всей текущей фрэймовой структуры;
blank – указывает, что документ должен отображаться в новом
окне.
<html>
<body>
<a href=”http://www.msmu.ru/” target=”_ blank”>Добро пожаловать в Горный Университет!</a> <a href=”http://www.msmu.ru/” target=”_parent”>
Добро пожаловать в Горный Университет!</a> <a href=”http://www.msmu.ru/” target=”_top”>
38
Добро пожаловать в Горный Университет!</a> <a href=”http://www.msmu.ru/” target=”_self”>
Добро пожаловать в Горный Университет!</a> </body>
</html>
Для перехода внутри страницы к конкретному разделу используют атрибут name тега гипертекстовой ссылки a, при помощи которого
создается именованный якорь.
<a name=”label”>ссылка на именованный якорь</a>
В данном примере внутри документа создается своеобразная метка, при этом именованный якорь никак не отображается в окне браузера.
Для перехода на место, которое отмечено именованным якорем ис-
пользуется знак # и имя якоря в конце URLследующим образом:
<a href=”page1.html#label”>переход на именованный якорь </a>
Переход внутри файла «page1.html» на именованный якорь выгля-
дит следующим образом:
<a href=”#label”>переход на именованный якорь </a>
Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход произойдет на начало документа, при этом сообщения об ошибке доступа не возникает.
Ссылка в определенное место на той же странице
Этот пример показывает, как использовать ссылку на другую часть
документа.
<html>
<body>
<p>
<a href=”#part5”>Переход на часть 5.</a> </p>
<h1>Лекция 1</h1> <h2>Часть 1</h2>
<p>Это первая часть ... </p> <h2> Часть 2</h2>
<p>Это вторая часть ...</p> <h2> Часть 3</h2>
<p>Это третья часть ...</p> <h2> Часть 4</h2>
<p>Это четвертая часть ...</p> <h2><a name=”part5”> Часть 5</a></h2> <p>Это пятая часть ...</p>
39
<h2> Часть 6</h2>
<p>Это шестая часть ...</p> <h2> Часть 7</h2>
<p>Это седьмая часть ...</p> <h2> Часть 8</h2>
<p>Это восьмая часть ...</p> <h2> Часть 9</h2>
<p>Это девятая часть ...</p> <h2> Часть 10</h2>
<p>Это десятая часть ...</p> </body>
</html>
Фреймы HTML
Фреймы используются для разбивки окна браузера на несколько независимых частей, каждая из которых представляет собой отдельный HTML-документ. Наиболее частое применение фреймов – это отделение меню от основного информационного наполнения. Хотя фреймы достаточно удобная вещь, использование их не рекомендуется. Следует внимательно следить за тем, чтобы теги, формирующие фреймовую структуру, располагались вне тегов <body>, так как они не относятся к телу документа.
Набор вертикальных фреймов
Этот пример показывает, как создать набор вертикальных фреймов с тремя различными документами.
<html>
<frameset cols=”50%,25%,25%”> <frame src=”frame_1.htm”> <frame src=”frame_2.htm”> <frame src=”frame_3.htm”> </frameset>
</html>
Набор горизонтальных фреймов
Этот пример показывает, как создать набор горизонтальных фрей-
мов с тремя различными документами.
<html>
<frameset rows=”25%,50%,25%”> <frame src=”frame_1.htm”> <frame src=”frame_2.htm”>
40