Ссылки на web-страницах
Гиперссылки на Web-страницы —одно из основных свойств WWW.
Любой документ может содержать ссылку на другой WWW-документ, заданную с помощью специального тега HTML.
Создание ссылки
Теперь введите тег <a href>. Тег <a> называется якорным тегом. Он применяется для ссылок на другие Web-страницы. Ключевое слово href якорного тега сообщает браузеру, на что вы ссылаетесь. Не забудьте про закрывающий тег </a>.
Пример 7:
<a href="index.html" border=0>новости</a>
Фраза «новости» появится на экране в виде текста ссылки. Когда посетители щелкнут мышью на этом тексте, они откроют файл index.html.
Необходимо указывать путь к файлам, на которые ссылаетесь.
Ссылки на любое место в WWW
Для таких ссылок вам понадобится полный URL документа, а не только путь и имя файла, как в предыдущих примерах.
Для адресации ресурсов Internet используется унифицированный указатель на ресурс (адрес) - URL (Uniform Resource Locator).
Общий формат URL:
<протокол>://<сервер><локальный адрес>
Протокол — это набор соглашений о правилах формирования и форматах сообщений Internet, о способах обмена информацией между абонентами.
В качестве протокола чаще всего указываются http, ftp, gopher. В качестве локального адреса указывают либо путь к странице (для http), либо путь к файлу (для ftp). Если путь к конкретной странице не указан, подразумевается начальная страница сайта или Web-сервера. Если не указан путь к файлу (или подкаталогу), подразумевается корневой каталог данного FTP-сервера.
Как любой элемент HTML, ссылка задается парой тегов. Открывающий тег (называемый якорным тегом) — это тег <А>. Затем вы задаете файл, на который ссылаетесь, а также текст ссылки. Все это завершается закрывающим тегом </А>.
Пример 8:
<ahref="http://www.yahoo.com/Arts/Performin Arts/Circuses/">Список цирков Yahoo </a>
После того как ссылки помещены на странице, можно легко перемещаться с одной страницы на другую.
Цвет ссылки
Выше мы рассматривали, как можно задать стандартные цвета текста страницы с помощью тега <body>.
Подобным же образом вы можете управлять цветом текста гиперссылки.
Атрибуты:
link = "#rrggbb" или имя цвета
Устанавливает цвет по умолчанию для всех ссылок, имеющихся в документе.
vlink= "#rrggbb" или имя цвета
Устанавливает цвет посещенных ссылок.
alink "#rrggbb" или имя цвета
Устанавливает цвет активной ссылки.
Графические ссылки
Для того чтобы создать графическую ссылку, поместите внутрь тегов якоря тега изображения следующим образом:
< a href="document.html"><img src="picture.gif"></a>
Когда рисунок используется в качестве ссылки, браузер выводит границу размером в один пиксель вокруг изображения (обычно голубым). Часто такая голубая рамка неприемлема, тогда используя атрибут border отображение рамки следует отключить. Атрибут border определяет ширину границ в пикселях. Задавая нулевое значение, вы отменяете появление рамки вокруг изображения, как это показано в следующем примере:
< a href=“document.html”><img src="picture.gif" dorder=0></a>
Списки
Списки — это элементы HTML, облегчающие представление информации в удобном формате. Списки используются для перечисления элементов по пунктам.
Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. В обычном абзаце текст переносится со строки на строку. Текст в списках выглядит по-другому. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, часто маркированы или нумерованы.
При правильном использовании Списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру.
Списки удобны для перечисления информации по пунктам. Пример 10, приведённый ниже, отображает запись маркированного списка.
Пример 10:
Мои интересы:
<UL>
<LI> Программы организации коллективной работы
<LI> Lotus Notes
<LI> Просмотр WWW
<LI> Написание книг по компьютерной тематике
<LI> Бродвейские мюзиклы и театр
</UL>
Списки помогают организовать информацию. Такую страницу посетители скорее прочтут, поскольку, бегло взглянув на список, можно быстро найти в нем то, что нужно.
Различные типы списков.
Существует три основных типа списков:
маркированные;
нумерованные;
списки определений;
вложенные.
Есть и другие типы, но эти три наиболее часто используются. Они сходны в том, что все они располагают каждый пункт на новой строке, и вы можете выделить нужный текст. Главное различие перечисленных типов состоит в способе нумерации и структуре.
Создать список довольно легко. Сначала введите теги открытия и закрытия списка (<UL> и </UL>, <OL> и </OL> или <DL> и </DL>). Затем перед текстом каждого пункта списка введите тег <LI>. Наконец, введите заголовок списка между тегами заголовка <LH> и < / LH>.
Обратите внимание на пробелы между каждым тегом <LI> и первой буквой соответствующего элемента списка. Следите за тем, чтобы у вас или всегда был пробел после тега <LI>, или никогда его не было. Если вы будете то использовать пробел, то нет, текст будет выглядеть неряшливо, поскольку браузеры отображают все пробелы, которые вы включаете в текст. Если же вы прилежны, список будет отображен ровно.
Маркированный список
В маркированном списке (Unordered List) каждому элементу списка предшествует символ bullet (пуля – символ также может быть графическим изображением). Маркированный список задается тегами <UL> и </UL>, а пункты списка между этими тегами — с помощью тега <LI>.
<UL>
<LI>
</UL>
Наберите текст первого пункта после тега <LI>. Для ввода каждого следующего пункта наберите тег <LI>, а затем текст пункта. Затем введите непосредственный заголовок списка с помощью тегов <LH> и <LH>. Web-броузеры автоматически отображают текст, отмеченный как заголовок, в формате, немного отличающемся от формата остального текста. Все теги <LI> и <LH> должны располагаться между тегами маркированного списка <UL> и </UL>.
Пример 11:
<UL>
<LI> Программы организации коллективной работы
<LI> Lotus Notes
<LI> Просмотр WWW
<LI> Написание книг по компьютерной тематике
<LI> Бродвейские мюзиклы и театр
</UL>
Результат:
Рис.10 Пример маркированного списка
Нумерованный список
В нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер. Нумерованный список задается с помощью тегов <OL> и </OL>. Как и в маркированном списке, каждый пункт задается тегом <LI>. По умолчанию номера начинаются с 1.
<OL TYPE=a>
<LН><В>График моего путешествия по Европе</В></LH>
<LI>Прибытие самолетом в Париж
<LI>Ночной переезд в Берлин
<LI>Поезд в Вену
<LI>Самолет в Рим
<LI>Остановка в Ницце
<LI>Возвращение в Париж, самолет домой
</OL>
Результат:
Рис.11 Нумерованный список
По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр — 1,2,3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры (I, II, III, IV и т. д.). Чтобы изменить стандартный тип нумерации, добавьте в тег <OL> ключевое слово TYPE. Ниже приведены пять возможных способов нумерации:
• TYPE=1 Стандартная цифровая нумерация — 1,2, 3,4, 5.
• ТУРЕ=А Прописные буквы - А, В, С, D, Е.
• TYPE=a Строчные буквы — а, Ь, с, d, e.
• TYPE=I Римские цифры - I, II, III, IV, V.
• TYPE=i Строчные римские цифры — i, И, iii, iv, v.
Иногда нужно, чтобы список начинался не с 1 (или А). Для задания другого начального номера вы можете использовать ключевое слово SEQNUMT тега <OL>.
Списки определений (глоссарии)
Cписки определений (Definition List) используются не так часто, как маркированные или нумерованные списки, они также могут быть полезны в некоторых случаях. В списке определений для каждого пункта предоставляется не одна, а две строки, что может быть полезно, когда вы приводите дополнительную информацию.
Списки определений выглядят несколько иначе, другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег <LI>. Тег <DT> задает отдельный элемент, то есть определяемый термин (текст располагается без отступа от левого поля странички), а тег <DD> – остальную информацию, которая вводится на следующей строке. Вторая строка информации называется отделением (расположение текста с отступом от левого поля). Представим теги, используемые при создании списков определений:
<DL>
<DT>
<DD>
</DL>
Пример 11:
<HTML> <HEAD>
<TITLE>Термины</TITLE>
</HEAD> <BODY>
<H2 ALIGN = Left> Термины</H2>
<dl>
<dt>Web server
<dd><P>Web – сервер. Сервер, хранящий и пересылающий HTML- документы и другие информационные ресурсы Internet с использованием протокола HTTP. Его называют также HTTP – сервером. </P>
<dt>Home page
<dd><P>”Домашняя страница”. Головная, начальная страница, локальный архив. Первая страница какого-либо Web-сервера или логически связанной группы HTML документов.
</P> </dl> </BODY> </HTML>
Результат:
Рис.12 Пример списка определений
Вложенные списки
Одно из замечательных свойств списков — это возможность вкладывать их друг в друга. Вложение списков в списки позволяет вам создать несколько уровней организации информации. Вы можете использовать несколько уровней списка на одной странице, что поможет вам упорядочить информацию. Вложенный список (Nested lists) включает элементы нумерованного и маркерованного списков, поэтому для его создания используются теги этих двух списков:
<OL>
<LI>
<UL>
<LI>
</UL>
<LI>
</OL>
Пример 13:
<HTML> <HEAD>
<TITLE>Советы по изготовлению страничек</TITLE>
</HEAD> <BODY>
<H2 ALIGN = Left> Советы по изготовлению страничек</H2>
<ol>
<li>По возможности избегайте пиктогроммы «В процессе производства»
<li>Используйте соответствующий язык
<li>Не перегружайте вашу страничку большими изображениями
<ol>
<ul>
<li>Избегайте драматического эффекта!
<li>Проверяйте как можно чаще ссылке на вашей странице
<li>Не забывайте обновлять свою страничку!
</ul>
<ol>
<li>Перед тем как положить готовую страничку на сервер надо:
<ul>
<li>Проверить грамматические ошибки
<li>Просмотреть свою страничку в различных программах просмотра.
</ul>
<li>Для рекламы странички надо:
</ol> </BODY> </HTML>
Результат:
Рис.13 Пример вложенных списков