-
Первый документ html
Определившись с редактором, рассмотрим структуру документа более внимательно. Если у вас установлен HTMLPad, то нажмите «Ctrl+N», а если нет, то наберите в блокноте (Notepad) следующий текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Это – заготовка для любого HTML-документа. Любой документ HTML состоит из трех частей:
-
строки, содержащей информацию о версии HTML;
-
блока заголовка документа;
-
тела документа, либо содержащего непосредственно отображаемую информацию, либо определяющего набор фреймов.
Если вы сохраните этот текст в файл с расширением «htm» или «html», например «hello.html», а затем откроете в браузере, то увидите пустое окно, что не совсем интересно. Поэтому мы немного модифицируем этот файл. Между <ТITLE> и </TITLE> введите фразу: «Мой первый документ HTML», а между <BODY> и </BODY> напишите «Всем привет!». Если вы сохраните этот файл и откроете его в браузере, то увидите примерно то, что изображено на рис. 3.5.
Рисунок 3.5. Простейший HTML-документ в MSIE
Если вы работаете с HTMLPad (или LightPad), то сохранять файл перед просмотром необязательно. Это делается автоматически, когда вы нажимаете кнопку просмотра. При этом оригинальное содержимое файла (после последнего сохранения) заносится в специальный буфер, что дает возможность, в случае необходимости, отказаться ото всех внесенных изменений.
Мы видим, что текст, набранный нами между тегами <TITLE> и </TITLE>, отобразился в заголовке окна, а то, что написано внутри <BODY> – в самом окне браузера. Сам элемент TITLE помещен внутри контейнера HEAD, который является заголовком документа. Помимо TITLE, в заголовке могут располагаться и другие элементы, например МЕТА, однако на текущем этапе мы не будем их рассматривать.
А пока что можно себя поздравить – своими руками мы только что создали свой первый документ HTML.
-
Гиперссылки
Основа гипертекста – это ссылки, как на отдельные части документа, так и между различными документами. Подобные ссылки называются гиперссылками. В языке HTML предусмотрен элемент А, при помощи которого и создаются гиперссылки. Давайте создадим еще один документ и назовем его index.html. Вот его содержание:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE> Главная страница </TITLE>
</HEAD>
<BODY>
Приветствую вас на своей страничке!
Вот мое <А HREF="hello.html">приветствие</A>.
</BODY>
</HTML>
При просмотре его в браузере мы увидим примерно то, что изображено на рис. 3.6. Обратите внимание, что перенос строки не воспринят браузером. Дело в том, что весь текст HTML-файла воспринимается программой просмотра как единая строка, при этом все лишние пробелы, символы конца строки и табуляции просто отбрасываются.
Если вы сохранили файл в той же директории (папке), что и предыдущий, то при щелчке по ссылке на слове «приветствие» откроется предыдущий документ. Так работают гиперссылки между документами. Для того чтобы создать ссылку на часть внутри документа, применяется следующая конструкция:
Рисунок 3.6. Документ с гиперссылкой
...
<А HREF="#ANCHOR1"> Ссылка-1 </А>
… часть документа …
<А NAME="ANCHOR1">
Текст, на который ссылается ссылка-1.
…
Как видно, тоже ничего сложного. Значок # указывает браузеру, что объект ссылки расположен внутри текущего файла. Параметр NAME задает имя метки. Подобные метки называются якорями (Anchors) и могут состоять из произвольной комбинации латинских букв и (или) цифр. В HTML 4 вместо NAME рекомендуется использовать атрибут ID, что дает возможность ссылаться не только через элементы А, однако лишь MSIE 5.x и Netscape 6 или версий выше могут распознать ID как адрес для ссылки.
Ссылки внутри файла и на внешний файл можно комбинировать, например:
<А HREF="seconfile.html#ANCHORl"> Ссылка-2 </А>
создает ссылку на якорь ANCOR1 в файле «secondfile.html». Главное правило в использовании якорей – «не злоупотребляй», поскольку увлечение ими может существенно затруднить навигацию по сайту.
Как уже отмечалось ранее, ссылки можно создавать не только на HTML-документы, но и на любые другие файлы. Делается это точно так же:
<А HREF="my_file1.ziр">Мой любимый файл</А>.
Во всех предыдущих примерах подразумевалось, что файл, на который указывает ссылка, и файл с самой ссылкой, расположены в одной и той же директории. Если это не так, то создается относительная ссылка, в которой прописывается часть пути между директорией с исходным документом и файлом-назначением. Для создания такой ссылки сделайте следующее: создайте папку «hello» внутри папки с документом «index.html» и переместите в нее файл «hello.html». Затем модифицируйте index.html следующим образом: поменяйте строку
Вот мое <А HREF="hello.html">приветствие</A>
на
Вот мое <А HREF="hello/hello.html">приветствие</A>.
В данном случае мы создали ссылку на файл во вложенной директории. Чтобы создать ссылку на файл во внешнем каталоге, т.е. расположенном уровнем выше, используется двоеточие. Чтобы проверить все это на практике, откройте файл «hello.html» и добавьте следующий текст:
<А HREF="../index.html">вернуться к главной странице </А>
Сохраните оба файла и проверьте работоспособность ссылок. Если все сделано правильно, то обе ссылки будут работать. Когда требуется создать ссылку на файл на два уровня выше, то двоеточие используется дважды, например:
<А HREF="../../index.html1">Вернуться на два каталога вверх</А>
Все рассмотренные выше варианты верны для случая, когда создаются ссылки внутри одного сайта. Если же надо сделать ссылку на внешний сервер или на какой-либо другой ресурс, то используется строка вида:
[протокол][адрес][порт][путь][имя файла]
Такой адрес называется URI – Universal Resource Identifier. В качестве протокола, как правило, используется HTTP. Типичный URI выглядит примерно так: «http://snkey.net/center/index.html». Если используется другой протокол, например FTP (для передачи файлов), то и URI должен быть соответствующим. Например, файл «cc32e47.exe», находящийся в каталоге «pub» на FTP-сервере Netscape, будет иметь следующий URI: «ftp://ftp.netscape.com/pub/cc32e47.exe». Сама ссылка будет выглядеть так:
<А HREF="ftp://ftp.netscape.соm/pub/сс32е47.ехе"> Скачать NC 4.7</А>
Параметр «порт», как правило, явно не указывается, т.к. используются значения по умолчанию – 80 для HTTP и 21 – для FTP. Если же порты используются, то адрес будет выглядеть так:
http://www.anyhost.ru:8080/hiddendir/foo.html
Очень часто URI путают с URL. Следует отметить, что URL является подмножеством от более общей схемы – URI.
Если вы хотите создать ссылку на адрес электронной почты, то она будет выглядеть примерно следующим образом:
<А HREF="mailto:i.am@myhost.ru">пишите письма!</А>
Здесь «mailto:» указывает браузеру, что далее следует адрес электронной почты, и при щелчке по ссылке необходимо вызвать почтовую программу. Если вы хотите передать еще и тему сообщения, то после адреса электронной почты укажите «subject». Например, чтобы создать сообщение со строкой "Привет" в качестве темы (subject), надо написать так:
<А HREF="mailto:i.am@myhost.ru?subject = Привет!"> пишите!</A>
Подобным образом создаются и ссылки на news-конференции, только вместо «mailto:» пишется «news:», а вместо адреса электронной почты – имя группы новостей. Иные параметры элемента А, в частности TARGET, который определяет то, где должна "сработать" ссылка, будут рассмотрены в дальнейшем.