Створення посилань та багато сторінкових сайтів

Довідкові відомості:

Посилання в HTML це звязок, навігація елементів в web–документі, такому як інтернет–сторінка, або web–сайт в різні частини цього документа, перехід на другий документ чи в любу частину другого документу, куди користувач web–сайту може попасти, знаходячись на інтернет–сторінці.

Їх є декілька видів, ми розглянемо всі види. Мене власне дуже зацікавив один з видів, це посилання яке перекидує на абзаци, які знаходяться на тій самій сторінці.

Як працює таке посилання, можна переглянути на Zura-Blog перейшовши на сторінку “Приклади HTML”, в кінці сторінки знаходиться блок з номерами (1,2,3,4), для кожного номера призначений приклад html–коду, натискаємо на номер і попадаєм на ту частинку сторінки, де знаходиться той приклад html–коду за яким закріплений той номер(індентифікатор) на який ми клацнули в кінці сторінки.

Подивитись як працює такий вид посилання. (глянем приклад)

Перейдіть на сторінку “Приклади HTML” натиснувши тут.

Або підведіть курсор мишки до кнопки “HTML” в верхньому меню і з випадаючого списку потрібно клацнути “Приклади HTML” В самому кінці сторінки знаходяться значення “Таблиця1,” Таблиця 2″, “Таблиця 3″, і т.д.” Клацніть на одну з “Таблиць” і вас перекине на номер коду на сторінці тої таблиці, на яку ви клацнули.

Але спочатку я розгляну я прописати інший вид посилання на сайт, це посилання яке перенаправляє на сторонній ресурс. Для чого портібний такий вид посилань, наприклад у вас в мережі є два русурси, один блог а інший сайт–візитка, для того щоб здійснювати переходи між ними стане в нагоді такий вид посилань.

 

Посилання на сайт

 

Для прикладу я запишу сюда посилання на пошукову систему “google”, щоб було легше розібратись.

 

<a href= “http://google.ua” target= “_blank” >GOOGLE</a>.

 

Розбираємо все по частинках, як прописувати таке посилання, спочатку на сторінці в кодах вибираємо місце для посилання.

1 ⇒ Відкриваємо тег “а” <a — це є парний тег,

2 ⇒ далі до парного тегу “а” потрібно дописати атрибут “href” — дописуємо до тегу атрибут “а” в нас получається <a href

3 ⇒ потім потрібно вказати місце куда веде посилання, дописуємо до атрибуту href дорівнює і лапки = ” “, в лапках вказуємо назву доменного імені, спочтку протокол http// далі ваша назва доменного імені.

 

<a href= “http://google.ua” — я вказав для прикладу посилання на google.

 

І звичайно щоб закінчити потрібно закрити рядок коду з посиланням, закривши тег <a закриваємо </a>

Нижче код, в середині посилання на пошукову систему google.ua

 

<a href= “http://google.ua” </a>

 

Але тут одне но, якщо ми зараз в коді закриємо тег, то тоді сторінка на яку вказує посилання після переходу буде відкриватись на тій самій сторінці. Більшість не радять такі посилання, я також скажу з свого досвіду що не раз траплялись випадки коли перейшовши на посилання яке відкрилось на тій самій сторінці, і коли сайт мені не подобався я закривав вкладку, а разом з нею заодно закривався і той сайт, на якому я перебував до переходу на інший ресурс.

Для того щоб посилання відкривалось в іншому вікні, нам потрібно прописати в код ще і атрибут “target” куда іменно дописати, дивимось на код написаний нижче, після “http://google.ua” дописуємо target= ” “ і в лапках потрібно вказати _blank перед закриваючим тегом. </a>

Сторінка буде відкриватись в новому вікні

 

<a href= ” http://google.ua” target= “_blank ” >GOOGLE</a> ось код, щоб сторінка відкривалась в новому вікні.

 

<a href= " http://google.ua" target= "_blank " >GOOGLE</a>

 

цей код відкриє посилання в тому самому вікні

 

<a href= “http://google.ua” </a> а цей код відкриє посилання в тому самому вікні.

 

<a href= " http://google.ua" target= "_blank " >GOOGLE</a>

Посилання – id

Тепер повертаюсь до виду посилань, про який згадувавася на початку публікації. Вони називаються “Якорні посилання”.

Що це за посилання? Вони дозволяють перекидувати по абзацах на сторінці. Для чого це потрібні такі посидання.

Приклад

Я зробив такий вид посилань на сторінці блогу називається “Приклади HTML” там розміщено декілька прикладів кодів html–сторінки, і зробив так щоб при клацанні на одну з позначок (наприклад Таблиця 1) мене перекидувало саме на той абзац, де знаходиться саме приклад з першою таблицею коду на сторінці.

Для чого потрібно.

Наприклад якщо таблиць багато, тоді сторінка получається дуже довга, коли ви подивитесь всі таблиці і опинитесь в кінці сторінки для того щоб повернутись до одної з таблиць (наприклад “Таблиця1″) можна звісно прокручуючи колесиком миші вверх, а можна вказати індентифікатор “Таблиця1″ і після клацання на індентифікатор “Таблиця1″ зразу опинитись на потрібній частині сторінки.

Зручніше буде якщо прописати в коді такий вид посилань, щоб не паритись з прокручуваннями, а натиснути на назву, або номер (залежно як ви назвете посилання) для того щоб зразу попасти на потрібну область сторінки, думаю по любому зручніше так, ніж бавитись з прокручуванням колесиком миші і шукати таблицю, а зразу натиснути на позначку і опинитись в тій області сторінки, де розміщена потрібна таблиця.

Як зробити таке посилання, щоб зручніше було користуватись сторінкою на сайті, натиснули на назву або номер, і опинились на потрібній частині тексту.

На потрібно вибрати місце для індентифікатора на сторінці.

1 ⇒ Прописуємо спочатку в коді сторінки теги параграф.<p></p>

2 ⇒ Між параграфами пропишем назву <p>Таблиця 1.</p>

3 ⇒ Ну і звичайно потрібно відкрити тег “а” і вказати атрибут href= ” ”

 

<p><a href= “# тут вказати елемент на який повинна посилатись “Таблиця1″ ” >Таблиця 1</a></p>

Ми повинні тепер вказати елемент на який повинна посилатись “Таблиця1″, вказати в ньому індетифікатор “id” я для прикладу взяв сторінку “Приклади HTML” на Zura – Blog, і пропишу індентифікатор в першому прикладі “Приклад 1″.

Приклад

 

<p> id= “head” Приклад 1 </p>

 

<p> id= "head" Приклад 1</p>

 

атрибут “id” вказує що це індентифікатор, і прописується перед тегом <p> id= “head”

Прописуємо тепер в параграфі <p>Таблиця 1</p> тег для посилання з атрибутом <a href= в лапках вкажемо назву індетифікатора “head”, але в цьому полі обовязково ришітку перед індентифікатором.

 

<p><a href= “#head” >Таблиця 1</a></p>

 

<p><a href= "#head" >Таблиця 1</a></p>

 

Назву індентифікатора можна любу дати, не обовязково “head”. Ці посилання також можна робити, якщо потрібно перейти на якусь іншу сторінку. потрібно просто дописати about.html “” а в лапках вказати індентифікатор. Який в свою чергу потрібно прописати на html–сторінці.

Посилання для того щоб закачати файл.

Ну що–ж продовжуємо, тепер розберу остальні види посилань, розпочну з посилання яке пригодиться для того щоб скачати файл з вашого сайту.

1 ⇒ Створюємо папку на сайті і прописуємо назву на латинській мові “dawnloud” ви можите свою.

2 ⇒ Вставляємо в папку файл, наприклад table.doc

3 ⇒ Створюємо на html — сторінці абзац <p></p>, в середині пропишем “Скачати статтю”.

 

<p>Скачати статтю</p>

 

4.Тепер робимо цей абзац з посиланням, між тегами параграфа прописуємо носилання на закачку файлу. <p><a href= і в лапках вказуємо назву папки “dawnloud” і назву файлу table.doc

 

<p><a href= “dawnloud/table.doc>Скачати статтю</a></p>

 

<p><a href= "dawnloud/table.doc>Скачати статтю</a></p>

 

Посилання на e-mail адресу

 

1 ⇒ Прописуємо теги параграф.<p></p>

 

2 ⇒ Між параграфами давайте просто пропишем <p>Автор</p>

 

3 ⇒ Далі тег і атрибут <p><a href= ” “ а в лапка вказуємо mailto:адреса почтового ящика.

 

<p><a href= “mailto:ааа@mail.ru”>Автор</a></p>

 

<p><a href= "mailto:ааа@mail.ru">Автор</a></p>

Завдання:

Продовжити розробку сайту, розпочату у лабораторній роботі № 11:

1. Стаорити довідник "Породи собак" у вигляді п'яьт взаємозв'язаних між собою веь-сторінок.

 

Лабораторна робота №12

Підключення каскадних стилів CSS. Керуванння кольором та

Фоном веб-сторінки

Довідкові відомості