Урок 7 - Ссылки (URL)

Progger | 17.05.2011, 15:31:20 | Просмотров: 1642

УРОК 7

Давайте подумаем, что ещё надо на нашу страничку. Настраивать текст по своему усмотрению мы умеем. Цвет настраивать – тоже. Вставлять изображения научились. Ну в принципе если создавать сайт-визитку, этого достаточно. Но если вы хотите, чтобы на вашем сайте можно было скачивать музыку, программы ну или что-то другое, то вы не обойдётесь без ссылок. На данный момент мы работали только в документе index.html. Давайте создадим ещё один документ, и назовём его, например, urok.html. Заполните страничку содержимым (напишите какой-либо текст на странице и т.д.), в нашем примере страница urok.html будет заполнена анекдотами, и располагаться в папке со страницей index.html. Ссылка на страницу, файл, картинку, музыку и прочее располагается внутри атрибута href, а текст которым выражена ссылка располагается между тегами <a> и </a> Например:

Code

<a href="urok.html">Лучшие анекдоты</a>

Если же страница urok.html лежит в другой папке, например, в папке files рядом с файлом index.html, то воспользуемся таким кодом:

Code

<a href="files/urok.html">Лучшие анекдоты</a>

Ну а если страница находится на другом сайте, то пользуемся следующим кодом:

Code

<a href="http://www.sait.ru/urok.html">Лучшие анекдоты</a>

Если вы располагаете ссылка не на web-страницу, а предположим на какое-либо приложение или музыку, то соответственно вместо .html пишите формат файла, например:

Code

<a href="files/igra.exe">Новая игра</a>

Code

<a href="files/muzika.mp3">Клубняк, качаем все</a>

Ссылки могут выражаться, как текстом, так и изображением, но об этом позже.
Цвет ссылки можно также изменять. Делается это следующими атрибутами: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. Атрибуты пишутся внутри тега <body>. Это пробуйте сделать сами. Если что-то не получится, то пишите в комментариях, поможем.
Также можно указать ссылку на вашу почту, например:

Code

<a href="mailto:adres@mail.ru"> Администрация сайта </a>

Извините за то, что говорю не в тему, но теперь, в уроках я иногда буду делать маленькие заметки, примечания. Хочу напомнить, что фон для страницы настраивается атрибутом bgcolor в внутри тега <body>. Если не помните, что такое атрибут, и не знаете, как его использовать, то смотрите урок 3. Но всё же я приведу пример.

Code

Так же есть атрибут background, который тоже настраивается внутри тега <body>. Этот атрибут может задать фоновое изображение вашему сайту. Например:

Code

Но если у нас есть фон, то зачем мы используем атрибут bgcolor? Всё просто. Фоновая картинка у некоторых пользователей может не загрузится. Если вы не напишите атрибут bgcolor, то фон страницы будет белым.
Ну и если заговорили о атрибутах внутри тега <body>, то давайте вспомним атрибут text. Этот атрибут, как вы уже помните, настраивает цвет текста внутри всего документа (по умолчанию - белый). Например:

Code

Так вернёмся к нашей теме. Теперь давайте я продемонстрирую, как выразить ссылку картинкой. Всё просто:

Code

Где:
Alt – альтернативный текст
Href – атрибут указания адреса
Src – путь к изображению
Align – расположение (слева, справа, по центру…)

Попробуйте сделать так, чтобы при нажатии на маленькую картинку открывалась большая, отписывайтесь в комментариях. Для того чтобы изображение или страница открытая по ссылке открывалась в новом окне, а не в том же, существует атрибут target. По умолчанию он открывает в том же окне, если же написать target="_blank", то содержимое откроется в новом окне. Атрибут пишется внутри тегов <a> и </a>.
Ну вот, со ссылками и изображениями мы уже в принципе разобрались. Пробуйте, экспериментируйте, повторяйте пройденные уроки, чтобы лучше усвоить эти темы.

Специально для вас – Линьшин Никита (Progger)

Теги: html, ссылки, уроки от WMPOLN, изучение