Например, если файл 2.html будет размещен во внутреннем каталоге DATA,то
ссылка на него из файла 1.html, находящегося в базовом каталоге будет такова:HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.
Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Текст, выделенный физическим стилем, будет отображаться одинаково во всех броузерах. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом.
Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, иммитирующим пишущую машинку, то есть имеющим фиксированную (моноширинную) ширину символа.
Остальные дескрипторы физических стилей сведены в таблицу:
| Таг | Значение | Пример |
|---|---|---|
| <U>. </U> | Подчеркивание | Подчеркнутый текст |
| <S>...</S> | Перечеркнутый текст | |
| < BIG >... </ BIG > | Увеличенный шрифт | Увеличенный шрифт |
| < SMALL >...</ SMALL > | Уменьшенный шрифт | Уменьшенный шрифт |
| < SUB >...</ SUB > | Подстрочные символы | Подстрочный текст |
| < SUP >... </ SUР > | Надстрочные символы | Надстрочный текст |
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
| Таг | Значение и пример стиля |
|---|---|
| <ЕМ>... </ЕМ> | Выделенный текст (emphasis — акцент) |
| < STRONG >.</ STRONG > | Сильно выделенный текст(strong — сильный) |
| <СIТЕ>...</СIТЕ> | Тест в виде цитаты |
| <СODE>... </СОDE> |
Текст в виде фрагмента HTML-кода |
| <DFN>... </DFN> | Текст в виде определения |
| <SАМР>... </SАМР> | Последовательность литералов (аналогично CODE) |
| <КВD>... </КВD> | Текст в виде названий клавиш клавиатуры |
| <VAR>...</VAR> | Текст, определяющий переменную или значение |
| <ACRONIM>...</ACRONIM> |
|
| <Q>...</Q> |
Текст, заключенный в скобки |
Подытожим наши знания о логических и физических стилях с помощью примера 5. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные логические стили.
<html> <head> <title>Пример 5</title> </head> <body> <H1>Шрифтовое выделение фрагментов текста</H1> <P>Теперь мы знаем, что фрагменты текста можно выделять <B>жирным</B> или <I>наклонным</I> шрифтом. Кроме того, можно включать в текст фрагменты с фиксированной шириной символа <TT>(имитация пишущей машинки)</TT></P> <P>Кроме того, существует ряд логических стилей:</P> <P><EM>EM - от английского emphasis - акцент </EM><BR> <STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR> <CODE>CODE - для фрагментов исходных текстов</CODE><BR> <SAMP>SAMP - от английского sample - образец </SAMP><BR> <KBD>KBD - от английского keyboard - клавиатура</KBD><BR> <VAR>VAR - от английского variable - переменная </VAR></P> </body> </html>
Все эти тэги допускают вложенность и пересечение друг другом. При использовании этих тэгов следует помнить, что их отображение зависит от настроек программы-броузера пользователя, которые могут и не совпадать с настройками броузера разработчика HTML-страницы. Например, тэг <EM> предполагает выделение текста броузером, при этом сам броузер определяет форму выделения. Большинство броузеров интерпретирует этот элемент как курсив,а броузер Lynx выделяет тест другим цветом.
Логический стиль <ACRONIM> принят недавно. С помощью него разработчик может определять аббревиатуру, а расшифровка дается в качестве атрибута TITLE и не отображается на странице:
<ACRONIM TITLE="Накопитель на гибком магнитном диске">НГМД</ACRONIM>
С помощью тэга FONT можно определить размер и цвет шрифта. В первом случае используется атрибут SIZE для указания размера шрифта Этот размер может быть указан как абсолютный (от 1 до 7) или относительный (от -4 до +4) по отношению к размеру шрифта, используемого на основной части страницы. Для задания размера основного шрифта используется тэг BASEFONT:
<BASEFONT SIZE=значение>
Если этот тэг не используется, то по умолчанию принимается размер шрифта равный 3.
Тэг <FONT COLOR=значение> позволяет сделать HTML-страницу более красочной, тогда единственным ограничением будет цветовая палитра на компьютере пользователя. Цвет может быть указан названием или шестью цифрами, соответствующими яркости каждого из цветовых каналов (красного, зеленого и синего). Таблица названий и цифровых кодов приведена в Приложении 2.
Оба атрибута (размер и цвет шрифта) могут быть объединены в одном тэге <FONT>, но должны разделяться точкой с запятой, а сами значения должны быть заключены в кавычки. Например:
<FONT SIZE="+1"; color="blue">
Хотя тэг <FONT> не поддерживается некоторыми броузерами, но он дает несомненные преимущества перед тэгами <H1>... <H&>. Главное из них: тэг <FONT> не разбивает строку, поэтому шрифт может несколько раз изменяться в пределах одной строки.
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.
Текст, расположенный между тэгами <UL> и </UL>, воспринимается как ненумерованный список (unordered list). Каждый новый элемент списка следует начинать с тэга <LI> (list item). В графических броузерах, таких как Netscape Navigator и Internet Explorer, напротив каждого элемента списка находится маркер (bullet). Для задания вида маркера используется атрибут Type в тэге <UL> (для всего списка) или в тэге <LI> для данного элемента списка. Значения атрибута могут быть следующими:
| Тип | Внешний вид (зависит от броузера |
|---|---|
| Disk | Заполненный кружок |
| Square | Заполненный квадратик |
| Circle | Незаполненный кружок |
необходим вот такой HTML-текст:
<UL> <LI>Иванов; <LI TYPE=square>Петров; <LI TYPE=circle>Сидоров </UL>
Обратите внимание: у метки <LI> нет парной закрывающей метки </LI> , так как она необязательна.
Можно также создать ненумерованный список, где вместо обычного маркера поместить рисунок формата GIF или специальный символ.
Атрибут SRС= используется для того, чтобы задать GIF-файл вместо обычного маркера. Он позволяет Web-разработчикам сделать HTML-страницы чрезвычайно привлекательными. Вместе с тем, его некорректное употребление приводит к исключительно уродливым страницам. Вместо того чтобы помещать GIF перед строкой с тэгом <ВR> в конце, вы можете создать собственные изящные маркеры и затем использовать их в списке. В этом случае вы получите все преимущества ненумерованного списка и вдобавок симпатичные GIF-картинки в качестве маркеров. Атрибут SRC= можно задать в тэге <UL>, определив сразу все маркеры списка, а можно указать разные GIF для разных пунктов списка, помещая атрибут SRC= в каждом таге <LI>. В любом случае для того чтобы атрибут SRС= работал с тагом <UL>, нужно задать атрибут РLAN=.
Нумерованные списки (ordered list) устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке.Если слегка модифицировать наш предыдущий пример:
<OL> <LI>Иван; <LI TYPE=a>Иванов; <LI TYPE=A>Петров; <LI TYPE=i>Сидоров; <LI TYPE=I>Федоров </OL>
получится вот такой список:
<OL TYPE=1> Таг создает список с нумерацией в формате 1.,2.,3.,4. и т. д.
<ОL ТYРЕ=A> Таг создает список с нумерацией в формате А., В., С., В. и т. д.
<ОL ТYРЕ=a> Таг создает список с нумерацией в формате а., b., с., d. и т. д.
<ОL ТYРЕ=i> Таг создает список с нумерацией в формате i., ii., iii., iv. и т. д.
<ОL ТYРЕ=I> Таг создает список с нумерацией в формате I., II., III., IV. и т. д.
Список определений (definition list) несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Тэг <DL> был создан для форматирования текста, определяющего какой-то термин. Определяемый термин записывается на одной строке, а его определение на следующей, с небольшим отступом вправо. Тэг <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если у вас на странице несколько тэгов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий таг </DL>. Помните, что тэг <DL> сдвигает только левую границу абзаца. Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:
<DL> <DT>HTML <DD>Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. <DT>HTML-документ <DD>Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). </DL>
Этот фрагмент будет выведен на экран следующим образом:
Обратите внимание: точно так же, как тэги <LI>, тэги <DT> и <DD> не имеют парных закрывающих тэгов.
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста:
<DL COMPACT> <DT>А <DD>Первая буква алфавита <DT>Б <DD>Вторая буква алфавита <DT>В <DD>Третья буква алфавита </DL>
будет выведен на экран примерно так:
Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует.
Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
Наши знания о списках можно вкратце свести в пример 6:
<html> <head> <title>Пример 6</title> </head> <body> <H1>HTML поддерживает несколько видов списков </H1> <DL> <DT>Ненумерованные списки <DD>Элементы ненумерованного списка выделяются специальным символом и отступом слева: <UL> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </UL> <DT>Нумерованные списки <DD>Элементы нумерованного списка выделяются отступом слева, а также нумерацией: <OL> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </OL> <DT>Списки определений <DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно. <P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. </P> <P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P> </DL> </body> </html>
Гиперссылки - это основа страниц HTML. Собственно, сокращение HTML означает "язык маркировки гипертекстов". Без гиперссылок невозможно построить ни одну HTML-страницу.
Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно только читать, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому, а также из одной HTML- страницы в другую. Для этого достаточно щелкнуть левой кнопкой мыши на некотором выделенном фрагменте текущего документа. Затем происходит переход к некоторому заранее назначенному документу или фрагменту данного документа.
Для записи гипертекстовой ссылки используется контейнер <А...>......</А>, который называют "якорь" аnchor) или "анкер". Якорь имеет несколько атрибутов, главным из которых является НREF (НуреrТехt Reference).В HTML переход от одного фрагмента текста к другому задается с помощью тэга вида:
<A HREF="[адрес перехода]">Фрагмент текста, указывающий ссылку</A>
Существует три основных типа гиперссылок: внутренние, внешние и относительные.
Внутренние ссылки (internal links) - это ссылки на фрагменты в пределах одной HTML-страницы. Они применяются для быстрого перемещения пользователя между различными разделами этой страницы.
Внешние ссылки (external links) или удаленные ссылки (distant links) - это ссылки на другие HTML-страницы, находящиеся на других WEB-серверах.
Относительные ссылки (relative links) или локальные ссылки (local links) - это ссылки на другие HTML-страницы, находящиеся на том же сервере, где и просматриваемая страница.
В зависимости от типа ссылки по-разному формируется адрес перехода.
Рассмотрим вначале самую простую внутреннюю ссылку.
Прежде всего должен быть сформирован якорь в том месте текста, куда в дальнейшем планируется осуществлять перемещение. Тэг якоря строится так:
<A NAME="AAA">Фрагмент текста, на который выполняется переход</A>
Слова "Фрагмент текста, на который выполняется переход" при этом никак не будут выделены в тексте документа.
Во избежание недоразумений рекомендуется задавать имена якорей латинскими буквами. Следите за написанием имен якорей: большинство браузеров отличают большие буквы от маленьких. Если имя якоря определено как AAA, ссылка на якорь aaa или AaA не выведет Вас на якорь AAA, хотя документ, скорее всего, будет загружен корректно.
Затем в том месте HTML-страницы, откуда необходимо выполнить переход, строится тэг гиперссылки, в котором в качестве адреса перехода указывается имя соответствующего якоря, дополненное вначале символом #:
<A HREF="#AAA">Фрагмент текста, указывающий ссылку на якорь AAA</A>
На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на якоря, расположенные в заголовках разделов документа.
Для создания внешней ссылки в качестве адреса указывается URL (Uniform Resource Locator) - унифицированный локатор ресурсов - полный адрес WEB-сайта. Например, если Вы хотите дать ссылку на это руководство по HTML со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент:
<A HREF="http://www.w3.org">Сайт консорциума W3C</A>
При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа, то есть создать комбинацию из внешней и внутренней ссылок.
Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html, находящемся на сервере с известным адресом. Прежде всего, необходимо создать вот такой якорь в файле 2.html:
<A NAME="AAA">Переход закончен</A>
Затем в файле 1.html (или в любом другом) можно определить переход на этот якорь:
<A HREF="URL(2.html)#AAA">Фрагмент текста, указывающий ссылку на якорь AAA</A>
В данном примере под конструкцией "URL(2.html)" подразумевается полный адрес WEB-сервера, где размещается сайт 2.html
И, наконец, рассмотрим создание относительных ссылок. Без них невозможно обойтись, если в структуру сайта входят несколько отдельных HTML-страниц. В простейшем случае, когда все HTML-страницы будут находить в одном каталоге сервера, ссылка строится так же, как и в случае внешней, но без указания в ней полного адреса WEB-сервера. Так, если в предыдущем примере считать, что файлы 1.html и 2.html находятся в одном каталоге, то получаем:
<A HREF="2.html">Фрагмент текста, указывающий ссылку на страницу 2.html</A>
По этому принципу построен переход на текст первого занятия:
<A HREF="lesson1.html">Перейти к занятию 1</A>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к занятию 1, при нажатии на который в текущее окно будет загружен документ lesson1.htm.
Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.
Из этого следует одно очень важное практическое соображение. Если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
Однако, если файлы разрабатываемого сайта размещены на сервере в разных каталогах, то не обойтись без организации относительных ссылок, для построения которых используется дескриптор <BASE>. С помощью него задается базовый каталог сайта. Обычно в качестве него выбирается тот каталог, а котором находится главный файл сайта(обычно он имеет название "index.html":
<BASE HREF="Адрес URL главного файла">
Отметим, что этот дескриптор включается в раздел HEAD
HTML-документа. Далее, все ссылки строятся относительно базового каталога
по тем же принципам, что и в любой компьютерной программе.
Например, если файл 2.html будет размещен во внутреннем каталоге DATA,то
ссылка на него из файла 1.html, находящегося в базовом каталоге будет такова:
<A HREF="DATA/2.html">Переход к файлу 2.html</A>Переход к файлу 2.html
В более сложных случаях, если нужно обеспечить ссылку между
файлами, находящимися в различных ветвях дерева каталогов, используется конструкция
"../", обозначающая переход на один уровень выше в иерархии каталогов,
относительно того файла, где формируется ссылка. Если необходим переход на большее
количество уровней, то эта конструкция повторяется соответствующее количество раз. Далее,
в адресе ссылки указывается относительный адрес второго файла по отношению к достигнутому
уровню на дереве каталогов:
<A HREF="../LEVEL/3.html">Переход к файлу 2.html</A>Переход к файлу 3.html
Использование дескриптора <BASE> позволяет создавать большие сайты со сложной системой навигации между отдельными HTML-страницами, причем опять же отладку сайта можно выполнять на домашнем компьютере даже не имеющем подключения к Интернет. В этом случае на компьютере создается такая же структура каталогов, что и на сервере, а в качестве базового адреса указывается полный путь каталога на логическом диске компьютера, где размещен главный файл сайта. После завершения работы с сайтом и перед публикацией его на сервере необходимо лишь изменить адрес базового сайта в всех дескрипторах <BASE>.
Если дескриптор <BASE> не указан, то по умолчанию в качестве базового каталога сайта принимается тот, где находится WEB-страница, из которой выполняется гиперссылка.
Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
<A HREF="mailto:user@mail.box">Послать письмо</A>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.
Разберем все, что мы знаем о связывании, с помощью примера 7.
<HTML> <HEAD> <TITLE>Пример 7</TITLE> </HEAD> <BODY> <H1>Связывание </H1> <P>С помощью ссылок можно переходить к другим файлам (например, к <A HREF="lesson1.htm">оглавлению этого руководства</A>).</P> <P>Можно выгружать файлы (например, <A HREF="ftp://www.w3.org.doc"> с сайта консорциума W3C.0</A>) на его локальный диск.</P> <P>Можно дать пользователю возможность послать почту (например, <A HREF="mailto:pavlov@ntu-kpi.kiev.ua"> автору этого руководства</A>).</P> </BODY> </HTML>
Еще один способ связывания, когда в качестве указателя ссылки выступает не текст, а изображение будет рассмотрен на следующем занятии.