Гиперссылки: как сделать ссылку в HTML?

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Создание таблиц в блокноте
  6. Цвета в HTML
  7. Как создать форму в HTML?
  8. Табличная верстка сайта
  9. Теги в HEAD
  10. Изображения в html
  11. CSS
  12. Работа с текстом и изображениями в CSS
  13. Блочная структура сайта
  14. Блочная верстка

В этом уроке мы научимся делать гиперссылки. Без них невозможен ни один полноценный сайт. Гиперссылка- это ссылка, при нажатии на которую браузер переводит нас на другую страницу в сети, или на другой сайт, или на определенное место в документе, в общем, туда, куда мы назначим. Для этого урока нужно проделать определенную подготовительную работу: создайте новую страницу с названием third_page.html .

Создайте на странице такой список:

Меню

  • Главная страница
  • Первая страница
  • Вторая страница

Код выглядит так:

<html>
<head>
<title>Third_page</title>
</head>
<body>
<p>Меню</p>
<ul>
<li>Главная страница</li>
<li>Вторая страница </li>
<li>Третья страница </li>
</ul>
</body>
</html>

Теперь мы из этого списка сделаем меню, каждая строка которого ведет на другую страницу. Это можно сделать с помощью гиперссылок. Тег гиперссылки выглядит так:

<a href=”страница”>текст ссылки</a>

Сделаем ссылку на главную страницу. Поменяем первый  элемент списка  на гиперссылку:

<li><a href=”index.html”> Главная страница </a></li>

Здесь внутри тега элемента списка (<li>) мы вставили тег гиперссылки (<a href=”index.html”>)

Теперь сделайте ссылку на вторую страницу(попробуйте сами). Код выглядит так:

<li><a href=”second_page.html”> Вторая страница </a></li>

Третьим элементом списка мы сделаем ссылку на страницу в интернете (напр. mail.ru)

Код будет выглядеть так: 

<li><a href=”http://www.mail.ru/” > Третья страница </a></li>

Откройте страницу в браузере, пощелкайте по ссылкам, посмотрите, как работают переходы на страницы. Если у вас ссылки не открываются, то выполните следующие действия:

  • Проверьте, чтобы все файлы (index.html , second_page.html) находились в одной папке со страницей third_page.html
  • Удалите куки в браузере
  • Перезагрузите браузер, потом перезагрузите страницу third_page.html

Таким образом, мы научились делать простейшие ссылки, без которых невозможно представить ни одну страницу в интернете. С помощью Dreamweaver можно сделать гиперссылки быстрее и легче.

Работа в Dreamweaver.

Создайте новую страницу под названием: third_page.html. Создайте список подобный тому, который мы описывали при работе в блокноте.

Гиперссылка в Dreamviewer

Для создания гиперссылок в Dreamweaver используется окно Link (цифра1). Выделите текст: Главная страница. Во вкладке Files (цифра 2) нажмите левой кнопкой  на файле index.html (цифра 3) и не отпуская кнопки перетащите в поле Link. У вас в поле дизайна выделенный текст должен поменяться: цвет шрифта станет синим и появится нижнее подчеркивание. Вот мы и создали нашу первую гиперссылку.

Второй способ сделать ссылку: выделите текст «Вторая страница». Щелкните на папке рядом с полем Link (цифра 1). В открывшемся окне выберите second_page  и нажмите ОК.

Все ссылка создана.

Выделите текст «Третья страница». В поле Link введите: http://www.mail.ru/

Мы создали ссылку на страничку mail.ru.

Посмотрите страницу в браузере.

В этой главе мы научились создавать простейшие гиперссылки. Эти навыки помогут нам в дальнейшем создавать красивые и удобные сайты. В следующей главе мы научимся создавать таблицы.

 

Оставить ответ

Ваш email не будет показан.