HTML

Bağlantı yaradırıq

müəllif Emil Hüseynov

Bağlantı (hiperlink) çox vacib mövzudur, çünki interneti bağlantılar olmadan təsəvvür etmək mümkün deyil.

İnternetin ən maraqlı yeniliklərindən biri olan bağlantılar bir sənəddən digərinə keçid etməyə, yaxud sənədin müəyyən hissəsinə bağlantı yaratmağa imkan verir.

Mətni, yaxud digər veb məzmunu bağlantıya çevirmək üçün onu <a> elementinin (<a>...</a> teqləri) içərisində yerləşdirmək və href atributuna keçid ediləcək veb ünvanın adını yazmaq lazımdır:

<a href="https://vebkurs.info">Veb proqramlaşdırma dərsləri</a>

Aşağıdakı addımları ardıcıllıqla icra edirik:

  • html qovluğunun içərisində creating_hyperlinks qovluğu yaradırıq
  • creating_hyperlinks qovluğunda isə index.html və links.html fayllarını yaradırıq

Bundan sonra Notepad++ redaktorunda aşağıdakı HTML kodunu index.html faylına əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Saytıma xoş gəlmişsiniz</title>
    <meta name="description" content="Saytda veb proqramlaşdırmanın əsasları ilə bağlı materiallar
    dərc ediləcək.">
</head>

<body>
    <h1>Xoş gəlmişsiniz</h1>
    <p>Saytda <strong>veb proqramlaşdırmanın</strong> əsasları ilə bağlı materiallar
        dərc ediləcək.
    </p>

    <p><a href="links.html">Faydalı linklər</a></p>
</body>
</html>

Sonra redaktorda aşağıdakı HTML kodunu links.html faylına əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Onlayn proqramlaşdırma kursları</title>
    <meta name="description" content="Veb səhifədə proqramlaşdırma dillərini öyrədən
		saytların siyahısı dərc edilib">
</head>

<body>
    <h1>Proqramlaşdırma dillərini öyrədən saytlar</h1>
    <p>Müxtəlif proqramlaşdırma dillərini öyrədən saytların siyahısı:</p>

    <ul>
        <li><a href="https://vebkurs.info">https://vebkurs.info</li>
        <li><a href="https://learn.javascript.ru">https://learn.javascript.ru</a></li>
        <li><a href="https://www.phptutorial.net">https://www.phptutorial.net</a></li>
        <li><a href="https://www.learn-html.org">https://www.learn-html.org</a></li>
    </ul>
</body>
</html>

index.html faylını brauzerdə açırıq:

bağlantı

Faydalı linklər bağlantısına klik etdikdə brauzerdə links.html səhifəsi açılır:

bağlantı

title atributu bağlantıya köməkçi informasiya əlavə edir

title atributu vasitəsilə bağlantıya köməkçi informasiya əlavə etmək mümkündür:

<a href="links.html" title="Veb proqramlaşdırmanı öyrədən saytların siyahısı">Faydalı linklər</a>

index.html faylını redaktorda açırıq və title atributunun köməyilə bağlantıya köməkçi informasiya əlavə edirik:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Saytıma xoş gəlmişsiniz</title>
    <meta name="description" content="Saytda veb proqramlaşdırmanın əsasları ilə bağlı materiallar
    dərc ediləcək.">
</head>

<body>
    <h1>Xoş gəlmişsiniz</h1>
    <p>Saytda <strong>veb proqramlaşdırmanın</strong> əsasları ilə bağlı materiallar
        dərc ediləcək.
    </p>

    <p><a href="links.html" title="Veb proqramlaşdırmanı öyrədən saytların siyahısı">Faydalı linklər</a></p>
</body>
</html>

index.html faylını brauzerdə açırıq:

title atributu

Həmçinin HTML sənədinin müəyyən hissəsinə bağlantı yaratmaq mümkündür. Bağlantı yaratmaq istədiyimiz elementə id atributu təyin edirik:

<h2 id="why-need-compiler">Kompilyator nə üçün lazımdır?</h2>

Bundan sonra <a> elementinin href atributunda URL ünvanın sonuna # (diyez işarəsi) əlavə edib id atributunun qiymətini yazırıq:

<a href="#why-need-compiler">Kompilyator nə üçün lazımdır?</a>

Daha yaxşı başa düşmək üçün compiler.html faylını köçürün. Sonra compiler.html faylını brauzerdə açın. HTML sənədindəki bağlantılara bir-bir klik edin.

Bağlantını yeni vərəqdə açırıq

target atributu bağlantını brauzerin yeni vərəqində açmağa imkan verir. Bu atribut aşağıdakı qiymətləri ala bilər:

  • _self - bağlantı cari vərəqdə açılır. Bu, standart ayardır, ona görə o, yazılmır
  • _blank - bağlantı brauzerdə yeni vərəqdə açılır

target="_blank" atributundan istifadə edərkən rel="noopener noreferrer" atributundan mütləq istifadə edin ki, kənar saytlar cari səhifə haqda əlavə məlumat əldə edə bilməsinlər. Bu, təhlükəsizlik tədbiridir.

İndi isə index.html faylının koduna kiçik dəyişklik edirik:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Saytıma xoş gəlmişsiniz</title>
    <meta name="description" content="Saytda veb proqramlaşdırmanın əsasları ilə bağlı materiallar
    dərc ediləcək.">
</head>

<body>
    <h1>Xoş gəlmişsiniz</h1>
    <p>Saytda <strong>veb proqramlaşdırmanın</strong> əsasları ilə bağlı materiallar
        dərc ediləcək.
    </p>

    <p><a href="links.html" target="_blank" rel="noopener noreferrer">Faydalı linklər</a></p>
</body>
</html>

index.html faylını brauzerdə açırıq və Faydalı linklər bağlantısına klik edirik:

target atributu

Göründüyü kimi links.html səhifəsi brauzerdə yeni vərəqdə açılıb.

Tam və nisbi URL ünvanlar

Tam URL ünvanlar

Tam URL ünvan - bu, keçid ediləcək resursun tam ünvanıdır. Tam URL ünvan https:// (həmçinin http:// ola bilər) protokolu ilə başlayır, sonra domen adı yazılır. Məsələn, https://vebkurs.info/courses/html-beginner/hyperlinks

Tam URL ünvanlar çox vaxt kənar resurslara bağlantı yaratmaq üçün istifadə edilir.

Nisbi URL ünvanlar

Nisbi URL ünvan faylın yerləşmə yerindən asılıdır. Bir neçə variantı nəzərdən keçirək.

Fayllar eyni qovluqda yerləşir

Biz belə vəziyyəti Bağlantının anatomiyası yarımbaşlığında araşdırmışıq. Hər iki fayl (index.html, links.html) eyni qovluqda yerləşir.

Fayllar müxtəlif qovluqlarda yerləşir

Aşağıdakı addımları ardıcıllıqla icra edirik:

  • creating_hyperlinks qovluğunun içərisində pages qovluğu yaradırıq
  • pages qovluğunda contact.html faylı yaradırıq

contact.html faylını Notepad++ redaktorunda açırıq və aşağıdakı HTML kodunu ona əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Əlaqə vasitələri</title>
</head>

<body>
    <h1>Əlaqə</h1>

    <p>İdeya, təklif və ya sualınız var?</p>
    <p>Aşağıdakı vasitələrlə mənimlə əlaqə saxlaya bilərsiniz:</p>
    <p><strong>Email:</strong> admin@vebkurs.info</p>
</body>
</html>

contact.html faylını brauzerdə açırıq:

nisbi URL ünvan

İndi index.html səhifəsindən pages qovluğunda yerləşən contact.html səhifəsinə keçid etməyə imkan verən bağlantı yaratmaq üçün href atributunda qovluğun adı, sləş simvolu və faylın adını (pages/contact.html) yazmaq lazımdır. Redaktorda index.html faylında bu dəyişikliyi edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Saytıma xoş gəlmişsiniz</title>
    <meta name="description" content="Saytda veb proqramlaşdırmanın əsasları ilə bağlı materiallar
    dərc ediləcək.">
</head>

<body>
    <h1>Xoş gəlmişsiniz</h1>
    <p>Saytda <strong>veb proqramlaşdırmanın</strong> əsasları ilə bağlı materiallar
        dərc ediləcək.
    </p>

    <p><a href="links.html" target="_blank" rel="noopener noreferrer">Faydalı linklər</a></p>

    <hr>

    <p><a href="pages/contact.html">Əlaqə vasitələri</a></p>
</body>
</html>

index.html faylını brauzerdə açırıq:

nisbi URL ünvan

Əlaqə vasitələri bağlantısına sıxdıqda pages qovluğunda yerləşən contact.html səhifəsi açılır.

Əsas qovluğa geri qayıdırıq

Əsas qovluq creating_hyperlinks adlanır. Qovluğun tərkibi aşağıdakı kimidir:

creating_hyperlinks qovluğunun tərkibi

Yuxarıdakı şəkildən göründüyü kimi contact.html faylı pages qovluğunun içərisində, index.html faylı isə əsas qovluqda yerləşirlər. Əgər contact.html faylında index.html faylına keçid etməyə imkan verən bağlantı yaratmaq lazımdırsa, URL ünvan aşağıdakı kimi olacaq: ../index.html:

<a href="../index.html">Əsas səhifə</a>

Cari qovluqdan bir səviyyə yuxarı qalxmaq üçün iki nöqtədən (..) istifadə olunur. İndiki vəziyyətdə cari qovluq pages-dir. contact.html faylını redaktorda açırıq və index.html faylına keçid etməyə imkan verən bağlantı əlavə edib, yadda saxlayırıq:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Əlaqə vasitələri</title>
</head>

<body>
    <a href="../index.html">Əsas səhifə</a>

    <hr>

    <h1>Əlaqə</h1>

    <p>İdeya, təklif və ya sualınız var?</p>
    <p>Aşağıdakı vasitələrlə mənimlə əlaqə saxlaya bilərsiniz:</p>
    <p><strong>Email:</strong> admin@vebkurs.info</p>
</body>
</html>

contact.html faylını brauzerdə açırıq:

bağlantı

Gmail, Yahoo, Outlook, Mail və digər bu kimi e-poçt xidmətlərinə məktub göndərmək üçün bağlantı yaratmaqdan ötrü <a> elementindən və mailto: protokolundan istifadə edilir:

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Nəticə belədir: Send email to nowhere

Əgər mailto: protokolunun qiymətini yazmasaq (yuxarıdakı nümunədə nowhere@mozilla.org), onda istifadəçinin kompüterində açılan poçt proqramında məktubu qəbul edən xanası boş olacaq.

Dərsin kodlarını github-dan köçürə bilərsiniz.

0
Çalışmalara (1) giriş əldə etmək üçün hesabınıza daxil olun.

Şərh yazmaq üçün hesabınıza daxil olun.