Отправляет email-рассылки с помощью сервиса Sendsay

Свежие уроки CSS3, HTML5, jQuery

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 142 RSS
←   Май 2014   →
 1
 2
 3
03.05.2014
09:05:44
11:05:56
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней 12 выпусков (1-2 раза в неделю)


Открыта: 27-04-2014

Автор
Юрий Немец

Статистика

142 подписчиков
0 за неделю
←   Все выпуски   →

Свежие уроки CSS3, HTML5, jQuery Урок 5. Ссылки. Часть 1


Урок 5. Ссылки

Здравствуй, уважаемый читатель.

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


Это пятая статья, посвященная изучению html. Перед прочтением данного урока рекомендую пройти предыдущие уроки:

Теория и практика

Сайт невозможно представить без ссылок. Ссылки осуществляют переходы с одной страницы на другую. Ссылки могут вести не только на другие страницы сайта, но также и на файл любого типа, даже если этот файл размещается на другом сайте. Ссылка создается с помощью тега <a href="путь_к_ссылке">Название ссылки</a>. Посмотрим как это будет выглядеть в коде нашей страницы: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul>
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
 
	<p>Morbi quis rutrum nulla. Quisque lacinia turpis nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. </p>
</body>
</html>

Атрибут href="banan.html" — указывает куда ссылаться при клике на ссылку. Также есть атрибут target="_blank", который отвечает за то, что при клике по данной ссылке она откроется в новом окне. Html страница, на которую переходят должна находиться в той же папке, где и главный файл. Если вы хотите остальные страницы держать в отдельной папке, вам необходимо написать следующее href="название_папки/banan.html" в теге <a>.

Домашнее задание

Создать три html страницы: banan.html, apple.html и persik.html. Добавить на каждую страницу информацию. Убедиться что переходы работают. Также сделать обратные ссылки назад на главную страницу.

Мы рассмотрели основное назначение ссылок. Но также ссылки можно использовать для того чтобы ссылаться на какой-нибудь элемент внутри страницы. Я не выкладывал весь код, потому там много текста. Пример кода элемента:

1
2
3
4
5
6
7
8

    ...
    <ul>
        <li><a href="#banan" target="_blank">Банан</a></li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
    <h2 id="banan">Польза банана</h2>
    ...

Посмотреть пример Скачать

Вы заметили, что в пути ссылки появилась решетка #, а у того элемента на который будем ссылаться внутри страницы появился атрибут id="#banan". Исходный код на странице с примером можно посмотреть нажав комбинацию клавиш на клавиатуре CTRL+U.

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

Больше практикуйтесь!
В избранное