Меню
Спросить
< >

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

30 октября 2015
Урок 3. Ссылки

Всем привет, на сегодняшнем третьем уроке мы познакомимся с ссылками.
И так, что такое ссылка?
Это своего рода транспортное средство на сайте, которое нас перенаправляет на, нужную нам, страницу. Если конечно мы знаем путь, какой нам нужен, и если мы его задали.

Как это вообще происходит?

При нажатии, браузер смотрит, что написано в атрибутах этой ссылки, а именно - какой путь, и, соответственно, переносит нас по этому пути.

Ссылка атрибут href

И так давайте перейдем к практике.

Открываем наш index.html.

У нас есть с прошлых уроков маркированный список ul и внутри него элементы li с текстом. Можно обернуть в ссылку сам тег li, а можно обернуть просто текст, что я и сделаю для начала.

  1. Ссылка выглядит вот так <a>Ссылка</a>
  2. Текст был просто обернут в li - <li>Главная</li>
  3. Теперь же оборачиваем еще и в ссылку - <li><a>Главная</a></li>

Оберните все пункты нашего меню также, соответственно в ссылку.

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

Создаем папку «page» и в ней 4 файла с расширением HTML

  1. Создаем соответственно пунктам:
  2. Категории - category.html
  3. Новости - news.html
  4. Регистрация - registr.html
  5. Вход - vhod.html

Страницы созданы, осталось указать путь к ним на главной странице.

  1. Атрибут HREF для ссылки является помощью, он хранит пути к файлам, поэтому туда и будем писать наши пути =)
  2. <li><a href="index.html">Главная</a></li>
  3. <li><a href="page/category.html">Категории</a></li>

Теперь немножко разберем код.

Мы прописываем код ссылок в нашей главной странице index.html, поэтому путь для нее прописан без излишек, так она будет ссылаться сама на себя, поэтому в пути HREF мы пишем лишь название ее файла с расширением – index.html

Для последующих страниц мы прописываем путь относительно нашего файла, с которого ссылаемся, в нашем случае мы ссылаемся с файла «index.html» к файлу «category.html», который в свою очередь располагается в папке «page». Теперь полностью путь для нашей ссылку выглядит для нас так:

Ссылка путь

Для остальных страниц пропишите аналогично, также можете оформить, созданные страницы, как и главную или же создать для них индивидуальный стиль. Чтобы оформить страницы в такой же стилистике, нам стоит только изменить путь к стилям КАЭСЭС. А именно! Стили у нас работали для главной страницы таким образом: относительно странице мы находили папку «resource» и в ней же сам файл со стилями «style.css», для новых же файлов в папке «page», они становятся не видимы, чтобы это предотвратить, нам нужно указать путь такой же, какой бы вы проделали будь вы в папке «page». То есть, чтобы попасть к стилям, находясь в папке «page», нам нужно из нее выйти и потом только зайти в «resource» в гости к стилям:

  1. Выходим из папки «page»
  2. Заходим в папку «resource»
  3. Открываем файл «style.css»
  4. Тоже самое мы должны объяснить ссылке «link», которую мы прописывали в прошлых уроках между тегам «head»:
  5. Выход из папки в HTML выглядит так: «..» две точки
  6. А значит наш путь будет выглядит теперь так:
  7. Выходим «..»
  8. Заходим «/resource»
  9. Открываем «/style.css»
  10. И полностью – «../resource/syle.css»
  11. <link href="../resource/style.css" rel="stylesheet">

Теперь то, наши стили подключатся и страницы будут выглядеть, как наша главная.

Заключение

Всем спасибо, переходите на видео уроки, ждите новых и всем добра =)

Следующая статьяПредыдущая статья