Основы работы с HTML

Гипертекстовые ссылки

Разбить на страницы
Показывать лекцию целиком

Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег <a>, который называют "якорь" (аnchor).

Создание гиперссылок

Этот пример показывает, как создавать ссылки в документе HTML.

<html>
<body>

<p>
<a href="page1.htm">
Этот текст</a> является ссылкой на страницу на
этом Web-сайте.
</p>

<p>
<a href="http://www.intuit.ru/">
Этот текст </a> является ссылкой на страницу 
во Всемирной Паутине.
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Изображение в качестве ссылки

Этот пример показывает, как использовать в качестве ссылки изображение.

<html>
<body>
<p>
Можно также использовать в качестве ссылки изображение:
<a href="http://www.intuit.ru/">
<img border="0" src="logo.gif" width="285" height="52">
</a>
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Описание тега гипертекстовой ссылки

Якорь (аnchor) позволяет устанавливать связь с любыми ресурсами во Всемирной Сети: другую страницу HTML, изображение, звуковой файл, видеоклип, и т.д.

Синтаксис тега гипертекстовой ссылки:

<a href="url">текст ссылки</a>

При помощи атрибута href передается адрес документа, на который указывает ссылка.

<a href="http://www.intuit.ru/">Добро пожаловать в ИНТУИТ!</a>

Такой же синтаксис используется для перехода во вложенную папку, например в папку "Помощь" на сайте Интернет-Университета Информационных Технологий используется код:

<a href="http://www.intuit.ru/help/">Страница помощи на сайте ИНТУИТ!</a>

Всегда добавляйте завершающую косую черту к ссылкам на вложенные папки. Если ссылка имеет следующий вид: href="http://www.intuit.ru/help", то будет создано два запроса HTTP к серверу, так как сервер добавит косую черту к адресу и создаст новый запрос следующего вида: href="http://www.intuit.ru/help/". При этом вызове обращение обычно происходит к странице index.htm внутри папки help или к другому файлу – это зависит от настроек web-сервера.

С помощью данного атрибута можно задавать ссылки не только по протоколу HTTP, но и по другим:

  • http://... - создает ссылку на www-документ;
  • ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
  • mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "";
  • news:.. - создает ссылку на конференцию сервера новостей;
  • telnet://... - создает ссылку на telnet-сессию с удаленной машиной;
  • wais://... - создает ссылку на WAIS - сервер;
  • gopher://... - создает ссылку на Gopher - сервер;
    •

    С помощью атрибута target можно определить, где будет открыт документ, на который указывает ссылка. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:

  • _self - указывает, что определенный в параметре href документ должен отображаться в текущем фрейме;
  • _parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее frameset, включающий текущий фрейм;
  • _top - указывает, что документ должен отображаться в окне-родителе всей текущей фрэймовой структуры;
  • _blank - указывает, что документ должен отображаться в новом окне.
    •  
    <html>
<body>
<a href="http://www.intuit.ru/" target="_blank">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_parent">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_top">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_self">Добро пожаловать в ИНТУИТ!</a>
</body>
</html>

    Пример выполнения данного HTML-кода

    Для перехода внутри страницы к конкретному разделу используют атрибут name тега гипертекстовой ссылки a, при помощи которого создается именованный якорь.

    <a name="label">ссылка на именованный якорь</a>

    В данном примере внутри документа создается своеобразная метка, при этом именованный якорь никак не отображается в окне браузера.

    Для перехода на место, которое отмечено именованным якорем используется знак # и имя якоря в конце URL следующим образом:

    <a href="page1.html#label">переход на именованный якорь </a>

    Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом:

    <a href="#label">переход на именованный якорь </a>

    Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход произойдет на начало документа, при этом сообщения об ошибке доступа не возникает.

    Дополнительные примеры

    Открытие ссылки в новом окне браузера

    Этот пример показывает, как открыть ссылку на другую страницу в новом окне, чтобы посетителю не нужно было покидать ваш Web-сайт.

    <html>
<body>

<a href="lastpage.htm" target="_blank">Последняя страница</a> 

<p>
Если задать атрибут target ссылки как "_blank",
то ссылка будет открыта в новом окне.
</p>

</body>
</html>

    Пример выполнения данного HTML-кода

    Ссылка в определенное место на той же странице

    Этот пример показывает, как использовать ссылку на другую часть документа.

    <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>

<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-кода

    Создание ссылки mailto

    Этот пример показывает, как соединиться с сообщением mail (будет работать только, если установлена служба mail).

    <html>
<body>

<p>
Это ссылка на почтовые адреса:
<a href="mailto:help@intuit.ru?cc=orders@intuit.rubcc=admin@intuit.ru?subject=Тестовый%20запрос!">
отправить запрос</a>
</p>

<p>При помощи этой ссылки отправляется письмо по адресу электронной почты
help@intuit.ru, его копия на адрес orders@intuit.ru и скрытая копия на адрес
admin@intuit.ru. Для корректной обработки заголовка письма необходимо пробелы
заменять на %20.</p>

</body>
</html>

    Пример выполнения данного 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-кода

    Набор горизонтальных фреймов

    Этот пример показывает, как создать набор горизонтальных фреймов с тремя различными документами.

    <html>

<frameset rows="25%,50%,25%">

<frame src="frame_1.htm">
<frame src="frame_2.htm">
<frame src="frame_3.htm">

</frameset>

</html>

    Пример выполнения данного HTML-кода

    Теги для работы с фреймами

    Тег <frameset> определяет, как разделить окно на фреймы. Каждый frameset определяет набор строк или столбцов. Значения rows/cols указывают величину области экрана, которую будут занимать каждая строка/столбец. Атрибут framespacing - определяет расстояние между фреймами в пикселах.

    Тег <frameset> является контейнером для всех остальных тегов фреймов. Между начальным и конечным тэгами кроме элементов <frame> и <noframes> могут находиться другие элементы <frameset>. То есть элемент <frameset> поддерживает вложенные конструкции фреймов.

    Тег <frame> определяет, какой документ HTML поместить в каждый фрейм. Тег <frame> имеет атрибут noresize="noresize", который запрещает изменять размер фрейма пользователю.

    В примере ниже задана фреймовая структура с двумя столбцами. Для первого столбца задано 25% ширины окна браузера. Для второго фрейма задано 75% ширины окна браузера. В первый столбец помещается документ HTML "frame_1.htm", а во второй столбец помещается документ HTML "frame_2.htm":

    <frameset cols="25%,75%">
   <frame src="frame_1.htm">
   <frame src="frame_2.htm">
</frameset>

    Необходимо учитывать, что браузер может не поддерживать фреймы, в этом случае следует использовать тег <noframes>.

    При использовании фреймов теги <body> </body> не используются. Однако, если добавить тег <noframes>, содержащий некоторый текст для браузеров, которые не поддерживают фреймы, необходимо будет поместить этот текст между тегами <body> </body>. Например,

    <html>

<frameset cols="25%,50%,25%">
  <frame src="frame_1.htm">
  <frame src="frame_2.htm">
  <frame src="frame_3.htm">

<noframes>
<body>Ваш браузер не поддерживает фреймы!</body>
</noframes>

</frameset>
</html>

    Пример выполнения данного HTML-кода

    Горизонтальные и вертикальные фреймы

    Этот пример показывает, как сделать набор фреймов с тремя документами, и как разделить их на строки и столбцы. При этом не все границы фреймов можно передвинуть.

    <html>

<frameset rows="50%,50%">
<frame src="frame_1.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_2.htm">
<frame src="frame_3.htm">
</frameset>
</frameset>
</html>

    Пример выполнения данного HTML-кода

    Фрейм навигации

    Этот пример показывает, как сделать фрейм навигации. Фрейм навигации содержит список ссылок, указывающих на второй фрейм.

    <html>

<frameset cols="120,*">
<frame src="menu.htm">
<frame src="frame_1.htm" name="frame_1">
</frameset>

</html>

    Пример выполнения данного HTML-кода

    Файл с именем "menu.htm" содержит ссылки на другие документы HTML, которые будут загружаться в frame_1. Исходный код для ссылок:

    <a href ="file_1.htm" target ="frame_1">Файл 1</a><br>
<a href ="file_2.htm" target ="frame_1">Файл 2</a><br>
<a href ="file_3.htm" target ="frame_1">Файл 3</a>

    Встроенный фрейм

    Этот пример показывает, как создать встроенный фрейм (фрейм внутри страницы HTML).

    <html>
<body>

<iframe src="menu.html"></iframe>

<p>Некоторые старые браузеры не поддерживают iframes.</p>
<p>В этом случае встроенный фрейм (iframe) не будет виден.</p>

</body>
</html>

    Пример выполнения данного HTML-кода

    Страницы:

    Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег <a>, который называют "якорь" (аnchor).

    Создание гиперссылок

    Этот пример показывает, как создавать ссылки в документе HTML.

    <html>
<body>

<p>
<a href="page1.htm">
Этот текст</a> является ссылкой на страницу на
этом Web-сайте.
</p>

<p>
<a href="http://www.intuit.ru/">
Этот текст </a> является ссылкой на страницу 
во Всемирной Паутине.
</p>

</body>
</html>

    Пример выполнения данного HTML-кода

    Изображение в качестве ссылки

    Этот пример показывает, как использовать в качестве ссылки изображение.

    <html>
<body>
<p>
Можно также использовать в качестве ссылки изображение:
<a href="http://www.intuit.ru/">
<img border="0" src="logo.gif" width="285" height="52">
</a>
</p>

</body>
</html>

    Пример выполнения данного HTML-кода

    Описание тега гипертекстовой ссылки

    Якорь (аnchor) позволяет устанавливать связь с любыми ресурсами во Всемирной Сети: другую страницу HTML, изображение, звуковой файл, видеоклип, и т.д.

    Синтаксис тега гипертекстовой ссылки:

    <a href="url">текст ссылки</a>

    При помощи атрибута href передается адрес документа, на который указывает ссылка.

    <a href="http://www.intuit.ru/">Добро пожаловать в ИНТУИТ!</a>

    Такой же синтаксис используется для перехода во вложенную папку, например в папку "Помощь" на сайте Интернет-Университета Информационных Технологий используется код:

    <a href="http://www.intuit.ru/help/">Страница помощи на сайте ИНТУИТ!</a>

    Всегда добавляйте завершающую косую черту к ссылкам на вложенные папки. Если ссылка имеет следующий вид: href="http://www.intuit.ru/help", то будет создано два запроса HTTP к серверу, так как сервер добавит косую черту к адресу и создаст новый запрос следующего вида: href="http://www.intuit.ru/help/". При этом вызове обращение обычно происходит к странице index.htm внутри папки help или к другому файлу – это зависит от настроек web-сервера.

    С помощью данного атрибута можно задавать ссылки не только по протоколу HTTP, но и по другим:

  • http://... - создает ссылку на www-документ;
  • ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
  • mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "";
  • news:.. - создает ссылку на конференцию сервера новостей;
  • telnet://... - создает ссылку на telnet-сессию с удаленной машиной;
  • wais://... - создает ссылку на WAIS - сервер;
  • gopher://... - создает ссылку на Gopher - сервер;
    •

    С помощью атрибута target можно определить, где будет открыт документ, на который указывает ссылка. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:

  • _self - указывает, что определенный в параметре href документ должен отображаться в текущем фрейме;
  • _parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее frameset, включающий текущий фрейм;
  • _top - указывает, что документ должен отображаться в окне-родителе всей текущей фрэймовой структуры;
  • _blank - указывает, что документ должен отображаться в новом окне.
    •  
    <html>
<body>
<a href="http://www.intuit.ru/" target="_blank">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_parent">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_top">Добро пожаловать в ИНТУИТ!</a>
<a href="http://www.intuit.ru/" target="_self">Добро пожаловать в ИНТУИТ!</a>
</body>
</html>

    Пример выполнения данного HTML-кода

    Для перехода внутри страницы к конкретному разделу используют атрибут name тега гипертекстовой ссылки a, при помощи которого создается именованный якорь.

    <a name="label">ссылка на именованный якорь</a>

    В данном примере внутри документа создается своеобразная метка, при этом именованный якорь никак не отображается в окне браузера.

    Для перехода на место, которое отмечено именованным якорем используется знак # и имя якоря в конце URL следующим образом:

    <a href="page1.html#label">переход на именованный якорь </a>

    Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом:

    <a href="#label">переход на именованный якорь </a>

    Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход произойдет на начало документа, при этом сообщения об ошибке доступа не возникает.

    Дополнительные примеры

    Открытие ссылки в новом окне браузера

    Этот пример показывает, как открыть ссылку на другую страницу в новом окне, чтобы посетителю не нужно было покидать ваш Web-сайт.

    <html>
<body>

<a href="lastpage.htm" target="_blank">Последняя страница</a> 

<p>
Если задать атрибут target ссылки как "_blank",
то ссылка будет открыта в новом окне.
</p>

</body>
</html>

    Пример выполнения данного HTML-кода

    Ссылка в определенное место на той же странице

    Этот пример показывает, как использовать ссылку на другую часть документа.

    <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>

<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-кода

    Создание ссылки mailto

    Этот пример показывает, как соединиться с сообщением mail (будет работать только, если установлена служба mail).

    <html>
<body>

<p>
Это ссылка на почтовые адреса:
<a href="mailto:help@intuit.ru?cc=orders@intuit.rubcc=admin@intuit.ru?subject=Тестовый%20запрос!">
отправить запрос</a>
</p>

<p>При помощи этой ссылки отправляется письмо по адресу электронной почты
help@intuit.ru, его копия на адрес orders@intuit.ru и скрытая копия на адрес
admin@intuit.ru. Для корректной обработки заголовка письма необходимо пробелы
заменять на %20.</p>

</body>
</html>

    Пример выполнения данного 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-кода

    Набор горизонтальных фреймов

    Этот пример показывает, как создать набор горизонтальных фреймов с тремя различными документами.

    <html>

<frameset rows="25%,50%,25%">

<frame src="frame_1.htm">
<frame src="frame_2.htm">
<frame src="frame_3.htm">

</frameset>

</html>

    Пример выполнения данного HTML-кода

    Теги для работы с фреймами

    Тег <frameset> определяет, как разделить окно на фреймы. Каждый frameset определяет набор строк или столбцов. Значения rows/cols указывают величину области экрана, которую будут занимать каждая строка/столбец. Атрибут framespacing - определяет расстояние между фреймами в пикселах.

    Тег <frameset> является контейнером для всех остальных тегов фреймов. Между начальным и конечным тэгами кроме элементов <frame> и <noframes> могут находиться другие элементы <frameset>. То есть элемент <frameset> поддерживает вложенные конструкции фреймов.

    Тег <frame> определяет, какой документ HTML поместить в каждый фрейм. Тег <frame> имеет атрибут noresize="noresize", который запрещает изменять размер фрейма пользователю.

    В примере ниже задана фреймовая структура с двумя столбцами. Для первого столбца задано 25% ширины окна браузера. Для второго фрейма задано 75% ширины окна браузера. В первый столбец помещается документ HTML "frame_1.htm", а во второй столбец помещается документ HTML "frame_2.htm":

    <frameset cols="25%,75%">
   <frame src="frame_1.htm">
   <frame src="frame_2.htm">
</frameset>

    Необходимо учитывать, что браузер может не поддерживать фреймы, в этом случае следует использовать тег <noframes>.

    При использовании фреймов теги <body> </body> не используются. Однако, если добавить тег <noframes>, содержащий некоторый текст для браузеров, которые не поддерживают фреймы, необходимо будет поместить этот текст между тегами <body> </body>. Например,

    <html>

<frameset cols="25%,50%,25%">
  <frame src="frame_1.htm">
  <frame src="frame_2.htm">
  <frame src="frame_3.htm">

<noframes>
<body>Ваш браузер не поддерживает фреймы!</body>
</noframes>

</frameset>
</html>

    Пример выполнения данного HTML-кода

    Горизонтальные и вертикальные фреймы

    Этот пример показывает, как сделать набор фреймов с тремя документами, и как разделить их на строки и столбцы. При этом не все границы фреймов можно передвинуть.

    <html>

<frameset rows="50%,50%">
<frame src="frame_1.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_2.htm">
<frame src="frame_3.htm">
</frameset>
</frameset>
</html>

    Пример выполнения данного HTML-кода

    Фрейм навигации

    Этот пример показывает, как сделать фрейм навигации. Фрейм навигации содержит список ссылок, указывающих на второй фрейм.

    <html>

<frameset cols="120,*">
<frame src="menu.htm">
<frame src="frame_1.htm" name="frame_1">
</frameset>

</html>

    Пример выполнения данного HTML-кода

    Файл с именем "menu.htm" содержит ссылки на другие документы HTML, которые будут загружаться в frame_1. Исходный код для ссылок:

    <a href ="file_1.htm" target ="frame_1">Файл 1</a><br>
<a href ="file_2.htm" target ="frame_1">Файл 2</a><br>
<a href ="file_3.htm" target ="frame_1">Файл 3</a>

    Встроенный фрейм

    Этот пример показывает, как создать встроенный фрейм (фрейм внутри страницы HTML).

    <html>
<body>

<iframe src="menu.html"></iframe>

<p>Некоторые старые браузеры не поддерживают iframes.</p>
<p>В этом случае встроенный фрейм (iframe) не будет виден.</p>

</body>
</html>

    Пример выполнения данного HTML-кода

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^