Лекция · 4.5

Web-бетке гиперсілтеме қою

Сайттан сайтқа өткенде тінтуірмен көк түсті мәтінді неге бассаң болды? Дәл осы «сиқыр» — гиперсілтеме, HTML-дің ЕҢ басты ерекшелігі. «Гипермәтін» деген сөздің өзі осыдан шыққан. Бүгін бір беттен екінші бетке, тіпті бір беттің ІШІНДЕ бір бөлімнен екіншісіне секіруді үйренеміз.

Гиперсілтеме және <a> тегі
Анықтама
Гиперсілтеме (hyperlink) — сол беттегі немесе басқа беттегі элементке сілтеме жасайтын web-құжат бөлігі. HTML-дің басты ерекшелігі — құжаттардың бір-бірімен гиперсілтеме арқылы байланысуы.

Сілтемелер екі белгі бойынша ажыратылады: сыртқы/ішкі (беттің шегінен шыға ма, жоқ па) және мәтіндік/графикалық (мәтін ме, сурет пе басылады).

Тег
<a>...</a> (anchor — якорь) — сілтемені анықтайды. href атрибуты — сілтеме басылғанда жүктелетін мекенжай.
Есеп (оңай): сыртқы сілтемелер

Берілді: сайтқа, бетке, файлға және суретке сілтеме жасау керек.

<a href="http://www.cprm-game.kz/">Saitqa siltema</a>
<a href="http://www.cprm-game.kz/beginner.html">Betke siltema</a>
<a href="http://www.cprm-game.kz/"><img src="smile.png"></a>

Түсіндірме: соңғы жолда <a> тегінің ішіне мәтін орнына СУРЕТ қойылған — бұл графикалық сілтеме жасайды.

Ішкі сілтемелер (якорь)

Ұзын бетте керек бөлімге дереу «секіру» қажет болғанда, ІШКІ сілтеме көмектеседі. Мұнда екі қадам бар: алдымен орынды БЕЛГІЛЕУ, содан кейін оған СІЛТЕУ.

<!-- 1. Belgileu (yakor qoyu): -->
<a name="yakor_aty">matin</a>

<!-- 2. Siltew ("#" belgisimen): -->
<a href="#yakor_aty">matin</a>
Есеп (орта): жылдам навигация жасау

Берілді: бір беттегі төрт тақырыпшаға жылдам өту.

Шешуі: алдымен тақырыпшаларды якормен белгілейміз:

<a name="1">Abai Qunanbaiuly</a>
<a name="2">Abai shygarmalary</a>

Содан кейін навигация сілтемелерін қоямыз:

<a href="#1">Qunanbaiuly</a>
<a href="#2">Shygarmalary</a>

Жауабы: сілтемені басу браузерді сол якорьге апарады, бет мекенжайы ...primer9.html#1 түріне өзгереді.

⬆️
Дайын якорь: #top сияқты арнайы якорьлер браузерде дайын тұрады — оны басу бетті автоматты түрде ЕҢ ЖОҒАРЫҒА жылжытады.
Email сілтемесі және түстер

Электрондық поштаға сілтеме жасау үшін href мәнінде URL орнына mailto: хаттамасы қолданылады:

<a href="mailto:lyazzat_r@gmail.com">Menin postam</a>

Мұны басқанда «Кімге» өрісінде сол адрес жазылған пошта программасы ашылады.

Сілтемелердің түсі де олардың КҮЙІНЕ қарай автоматты өзгереді:

АтрибутҚызметіӘдепкі түс
linkӘлі ҚАРАЛМАҒАН сілтемеКөк
alinkБЕЛСЕНДІ сілтеме (басу сәтінде)Қызыл
vlinkБұрын ҚАРАЛҒАН сілтемеКүлгін

Бұл атрибуттар <body> тегінде көрсетіледі: <body link="red" vlink="#cecece" alink="#ff0000">.

🎯 ҰБТ байланысы
Сілтеме атрибуттары мен ішкі/сыртқы сілтеме айырмашылығы жиі кездеседі.
1
<a> тегінің href атрибутысыз сілтеме жұмыс істемейді.
2
Ішкі сілтеме үшін якорьді name арқылы белгілеп, href-те "#" қосу керек.
3
link/vlink/alink — сілтеменің әртүрлі КҮЙІНЕ сай түстерді ажыратады.
Сабақ қорытындысы
  • Гиперсілтеме — HTML-дің басты ерекшелігі, <a href="..."> тегімен жасалады.
  • Сілтеме сыртқы/ішкі және мәтіндік/графикалық болып бөлінеді.
  • Ішкі сілтеме — name атрибутымен якорь белгілеп, href="#якорь" арқылы сілтеу.
  • mailto: — email сілтемесі; link/vlink/alink — сілтеме күйлерінің түстері.