Ссылки и кнопки

Ссылки и работающие кнопки (баннеры)

Допустим у вас на сайте не одна страничка, а две и более. Не обходимо сделать так, чтобы посетитель, ознакомившись с первой страницей, мог попасть на вторую или третью… или десятую. Для этого необходимы ссылки.
Также вы можете поставить ссылки не только на свои собственные страницы, но и на другие сайты, форумы и прочие ресурсы Интернета.
Рассмотрим для начала, как делается простая ссылка и как делается ссылка с картинкой (баннер).

1. Ссылки

Простая ссылка выглядит так:

<a href=»http://lezione.dugward.ru»> Как мы делали этот сайт</a>

Внимание! Не забывайте об очень распространённой ошибке: одинарные (‘) и двойные («) кавычки в html и прочих языках программирования имеют разное значение. Две одинарные кавычки не заменят одну двойную. В данном случае, во всех кодах, которые я привожу, кавычки должны быть двойные.

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

Не забывайте обязательно ставить знак » перед и после адреса. Пробелы между кавычками и адресом оставлять НЕЛЬЗЯ.

Если Вы нажали на такую ссылку, то должны были заметить, что новая страница по ссылке открылась в том же самом окне и вам пришлось возвращаться обратно, нажав стрелочку «вернуться» в своём браузере. Чтобы страничка открывалась в новом окне, не закрывая старой, надо добавить ещё один атрибут: target=»_blank»
Этот атрибут обозначает, что новая страница должна открыться в новом окне браузера, не закрывая то окно, в котором мы находимся. Тэг ставится после адреса и ссылка теперь будет выглядеть так:
<a href=»http://lezione.dugward.ru» target=»_blank»> Как мы делали этот сайт</a>
Теперь попробуем ещё раз нажать на ссылку:
Как мы делали этот сайт
Теперь новая страница открывается в отдельном окне.
Далее рассмотрим, как делается рабочая ссылка с картинкой (баннер).

2. Кнопки (баннеры)

Для того, чтобы сделать работающую кнопку (баннер), нужно для начала иметь картинку баннера. если у вас её нет в?» вам нужно её сделать (или попросить, чтобы кто-то сделал, или обратиться к урокам по фотошопу, которые будут в дальнейшем выложенный на этом сайте). А потом, после того, как вы обзавелись необходимой картинкой, вам нужно прописать точно такую же рабочую ссылку, как мы только что делали в пункте 1. Но добавить в неё ссылку на изображение. Выглядит это так:

<a href=»http://lezione.dugward.ru»> <img src=»pa1.jpg» border=»0″> </a>

Красным цветом обозначена ссылка на изображение, которое лежит в той же папке, что и наши страницы. Атрибут border=»0″ означает, что вокруг изображения нет рамочки.

Примечание:
Если у вас картинка лежит в той же папке, что и странички вашего сайта, то адрес пишем так, как и прописано: pa1.jpg (название картинки и формат, в данном случае, jpg)
Если вы решили положить картинку в отдельную папку (папку можно создать там же, в «Управлении файлами и HTML-редакторе», то адрес должен указываться по другому. Например, вы создали папку с названием «dip2″. В неё загрузили ту же самую картинку pa1.jpg
Вы прописываете адрес к картинке, указав сперва название папки, а потом через косую черту — название картинки: dip2/pa1.jpg
И ваша кнопка будет выглядеть следующим образом:
<a href=»http://lezione.dugward.ru» target=»_blank»> <img src=»dip2/pa1.jpg» border=»0″> </a>

Допустим, вы хотите, чтобы картинка лежала не у вас в корневой папке сайта, а где-нибудь в другом месте. Таким образом вы можете сэкономить место, отведённое для вашего сайта. Тогда вам нужно загрузить картинку на какой-либо хостинг фотографий, например на Радикал.ру (адрес http://www.radikal.ru/ ), или какой-то другой, удобный для вас. Для этого вам необходимо сперва загрузить картинку на Радикал.ру (или другой хостинг). Это осуществляется следующим образом:
1. Вы вводите в адресную строку браузера адрес хостинга (в данном случае это Фоторадикал.ру):

2. Нажать кнопку «Enter» на клавиатуре. Откроется страница Радикал.ру

3. Вы нажимаете на кнопку «Обзор», на которую указывает стрелочка курсора. Вам открывается окно, в котором отображаются папки вашего компьютера.

4. Выбираете у себя в папках нужный рисунок и нажимаете кнопку «Открыть», после чего видите вот такую картину:

5. Убираете галочки из окошек: «Уменьшить до…» и «Оптимизировать формат», чтобы программа перенесла ваш рисунок так, как он есть.
Нажимаете кнопку «Загрузить».
6. Когда Радикал загрузит вашу картинку, она отобразится, как показано на следующем рисунке:

7. Вы копируете строчку, которая называется «Ссылка» и вставляете её целиком в вашу ссылку, вот таким образом:

<a href=»http://lezione.dugward.ru»> <img src=»http://s43.radikal.ru/i099/0808/2d/e71e87bc9211.jpg» border=»0″> </a>

8. Теперь у вас есть две готовые работающие кнопки с одинаковыми картинками, но одна картинка лежит в вашей корневой папке, а другая на Радикал.ру.

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

Links and operating buttons (banners)

Let’s say you have a website than one page, but two or more. Not necessary to make the visitor reading the first page, he could get to the second or third … or ten. This will require links.
Also, you can put links not only to their own pages, but also on other sites, forums and other Internet resources.
Consider for a start, how to make a simple reference and as a reference to the picture (banner).

1. Links

A simple reference looks like this:

<a href=»http://lezione.dugward.ru»> As we did this site </a>

Attention! Do not forget about the very common mistake: single (‘) and double quotes («) in html and other programming languages have different meanings. Two single quotation marks will not replace one double. In this case, all codes, which I quote, quotation marks must be double.

Continue. Blue I have designated the full address of the page that we do redirect. This address is recorded in your browser, and you can copy it from there if needed.
I marked in red text that explains exactly where we redirect. Here, on this page we can get to the main page of lessons, which is located on the contents.
Working link: How do we do this site

Do not forget to put a sign of sure «before and after the address. The spaces between the quotation marks and the location can not leave.

If you clicked on a link, you must have noticed that a new page under the link opens in the same window, and you had to go back by pressing the arrow «back» in your browser. To Page opens in new window without closing the old one, it is necessary to add one more attribute: target = «_ blank»
This attribute indicates that the new page should open in a new browser window without closing the window in which we find ourselves. The tag is placed after the address and a link will now look like this:
<a href=»http://lezione.dugward.ru» target=»_blank»> How do we do this site </a>
Now try again to click on the link:
As we did this site
Now, a new page opens in a separate window.
Next, consider how to make a working link with an image (banner).

2. buttons (banners)

In order to make the operating button (banner), we first need to have a picture of the banner. if you have it not? «you need it to do (or ask someone to do, or refer to the lessons on Photoshop, which will be further laid on the site). And then, after you have got the necessary picture you need to register the exact same working link, we just did in paragraph 1. However, add to it a reference to the image. It looks like this:

<a href=»http://lezione.dugward.ru»> <img src = «pa1.jpg» border = «0»> </a>

Red indicates a link to an image that is in the same folder as our page. Attribute border = «0» means that no frames around the image.

Note:
If you have a picture lies in the same folder as the page of your site, then write the address as written and: pa1.jpg (picture name and format, in this case, jpg)
If you decide to put a picture in a folder (a folder can be created in the same place, in the «Managing files and HTML-editor», the address must be indicated in another way. For example, you create a folder called «dip2″. In it uploaded the same image pa1.jpg
You have to write the address to the image by specifying the name of the folder first, and then a slash — the name of the picture: dip2 / pa1.jpg
And your button is as follows:
<a href=»http://lezione.dugward.ru» target=»_blank»> <img src = «dip2 / pa1.jpg» border = «0»> </a>

Let’s say you want a picture you do not lay in the root folder of the site, but somewhere else. This way you can save space allotted for your website. Then you need to upload an image to a photo hosting, such as Radikal.ru (address http://www.radikal.ru/), or any other convenient for you. To do this you must first download the picture to Radikal.ru (or another host). This is done as follows:
1. you enter into your browser address host (in this case Fotoradikal.ru):

2. Press «Enter» on the keyboard. Page opens Radikal.ru

3. You click on the button «Browse», which indicates the arrow cursor. You opened a window that displays the folders on your computer.

4. Choose a folder in his desired image and click «Open» button and then you can see here is a picture:

5. ticks from the windows: «Zoom to …» and «Optimize size» to your drawing program is transferred as it is.
Click on «Upload.»
6. When the radical load your image, it will appear as shown in the following figure:

7. you copy a line, which is called «Link» and paste it into your whole link, like this:

<a href=»http://lezione.dugward.ru»> <img src = «http://s43.radikal.ru/i099/0808/2d/e71e87bc9211.jpg» border = «0»> </ a >

8. Now you have two buttons are ready to work with the same picture, but a picture is in your root folder, and the other on Radikal.ru.

In the next lesson we are going to insert these links in our table ready site.