Движемся дальше, разберем один, достаточно важный момент, - это ссылки. Наверное, нет ни одной WEB – страницы, чтобы на ней не было хотя бы одной ссылки. Как же тогда из обычного текста сделать ссылку? в целом все очень просто и в HTML есть для этого тег <a> этот тег является парным и должен обязательно иметь закрывающийся тег </a>. Это сокращение от английского слова anchor и переводится как якорь.
Если просто указать тег <a> то браузеру это еще не о чем не говорит, браузер не знает что это за ссылка и куда она ведет. Поэтому тут такая же ситуация как и с вставкой изображения нужно дописать атрибуты чтобы браузеру стало понятно что это за ссылка. Если применить только сам тег, то браузер просто проигнорирует наш тег и в место ссылки у нас будет простой текст.
Для ссылки самым главным атрибутом является href="". Этот атрибут указывает куда ведет указанная ссылка, и в нашем случае укажем путь на главную страницу нашего сайта.
<a href="/">Ведет на главную webteoretik.ru</a>
Теперь, если Вы вставите в редактор эту ссылку и сохраните код, а затем обновите браузер, то у нас появится ссылка при нажатии на которую на Вашей странице загрузится главная страница сайта webteoretik.ru. Это не всегда является удобно так как вы можете потерять посетителя Вашего сайта. Почему? Потому что посетитель, кликнув на ссылку на вашем сайте, загрузит страницу другого сайта, и посетитель вероятней всего останется уже на нем. Что для этого делать? Открывать страницу другого сайта в новой вкладке. Для этого нужно в ссылке нужно указать еще один атрибут target="_blank". Теперь нажав на ссылку, страница у нас откроется в новое окне, а наша остается не тронутой. И есть еще один атрибут, это по сути универсальный атрибут, и может быть использован и с другими тегами. Это атрибут title="webteoretik". Данный атрибут при наведении мыши на ссылку или элемент выведет подсказку. В нашем случае после наведения мыши всплывает подсказка webteoretik.
<a href="/" target="_blank" title="webteoretik">Ведет на главную webteoretik.ru</a> Какой-то текст Какой-то текст
В примере выше, если Вы заметили, ссылка вложена в абзац и в этом нечего страшного нет. Так вставляется любая ссылка внутри текста. Вот мы и рассмотрели, как создается абсолютная ссылка то есть используется атрибут href="/materials/25" к которому присваивается конкретный адрес сайта вместе с названием домена.
Теперь рассмотрим Относительные ссылки. Такими ссылками могут быть ссылки, например, которые позволяют скачивать файлы. Например, в прошлом уроке показано как вставить изображение, там путь к картинке также указывался относительной ссылкой. И так вернемся к ссылке, которая помогает скачивать файлы. Для файлов которые скачиваются, как правило, так же создается отдельная папка. В папке HTML рядом с папкой images создайте еще одну папку files и в нее занесите какой-то файл, например files.pdf. Ниже показан пример относительной ссылки для скачивания файла.
Скачать PDF - документ
Если вы хотите чтобы закачка начиналась в новом окне, то можно так же указать атрибут target="_blank".
В Относительной ссылке указывается путь относительно корня сайта, т.е. корень сайта – это там, где лежит файл index.html, а в абсолютной указывается конкретный адрес сайта. Относительные ссылки опасны, так как если папка с файлом переместится в другое место, на уровень выше в files2, то браузер уже не сможет найти Ваш файл для закачки или же указанную картинку. Поэтому при создании сайтов лучше использовать абсолютные ссылки, чтобы потом не возникали не понятные ошибки. На этом все, встретимся в следующем уроке, где будет показано, как делать якорные ссылки и ссылки на электронную почту.
CSS