 |
Создание сайта с помощью текстового редактора (Notepad-блокнот)
|
|
|
|
Теперь мы знаем достаточно, чтобы проектировать простые страницы, но чтобы сделать их функциональными необходимо использовать возможности гипертекста.
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида: <A HREF="[адрес перехода]">выделенный фрагмент текста</A>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти.
1. Открываем документ 1.htm в редакторе.
2. Добавляем в него ссылку на нашу вторую страничку – 2.htm Для этого добавляем текст, отображающий смысл того, что находится у нас на документе 2.htm и снабжаем этот текст необходимыми метками, например: <A HREF="2.htm">Мои любимые стихи</A>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента, при нажатии на который в текущее окно будет загружен документ 2.htm. Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.
3. На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например:
<A HREF="http://www.yandex.ru "> Старый добрый Яндекс </A>*** Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
*** А чтоб послать кому-то письмо такая: <A HREF="mailto:[email protected]">Послать письмо</A>
|
|
|
Разберем и используем все, что мы знаем о связывании на практике:
<HTML>
<HEAD>
<TITLE>Мой сайт</TITLE>
</HEAD>
<BODY>
<H1>Связывание </H1>
<P> С помощью ссылок можно переходить к другим файлам
(например, к <A HREF="2.htm"> оглавлению этого
руководства</A>). </P>
<P>Можно выгружать файлы (например,
<A HREF="ftp://yi.com/home/LysakovskayaDarya/html-pr.doc">это
руководство в формате Microsoft Word 2.0</A>) по FTP.</P>
<P>Можно дать пользователю возможность послать почту (например,
<A HREF=”mailto:[email protected]”>автору этого руководства</A>).</P>
</BODY>
</HTML>
4. Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте. Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая: <IMG SRC="picture.gif">
*** Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например: <IMG SRC="picture.gif" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст «Картинка» и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени). Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя (полный путь).
5. Вставляем на нашу страничку любую картинку. Чтобы не писать полное имя картинки с размещением, переместите выбранную картинку в тот же каталог(папку), где находятся ваши странички. Тогда код будет выглядеть примерно так:
|
|
|
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<H1 ALIGN=CENTER> Здравствуйте, уважаемые!</H1>
<A HREF="2.Htm"> <IMG SRC="0.jpg" ALT="Картинка"> </A>
<H2>Это чуть более сложный пример HTML-документа</H2>
<P> Это мой первый сайт, моя гордость, моя прелесть… </P>
<P ALIGN=CENTER> Да, и сам я ничего… </P>
<P ALIGN=RIGHT> Придумайте что-нибудь своё, пожалуйста!!! </body>
</html>
Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке.
|
|
|
