HTML

Meta teqlər

müəllif Emil Hüseynov

HTML sənədində <head> elementi veb səhifədə görsənmir və aşağıdakı məlumatları özündə saxlayır:

  • səhifənin adını - <title> elementi
  • CSS fayl üçün bağlantını
  • ikonkalar üçün bağlantıları
  • digər metaverilənləri (HTML sənədinin müəllifi, sənədi təsvir edən vacib açar sözləri)

<head> nədir?

Aşağıdakı HTML sənədinə diqqət yetirək:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Bu, mənim səhifəmdir</title>
</head>

<body>
    <p>Bu, mənim səhifəmdir</p>
</body>
</html>

<head> blokunun kontenti veb səhifədə görsənmir. Onun vəzifəsi HTML sənədinin metaverilənlərini saxlamaqdan ibarətdir:

<head>
    <meta charset="utf-8">
    <title>Bu, mənim səhifəmdir</title>
</head>

Böyükhəcmli kontentə malik səhifələrdə <head> bloku daha çox məlumatdan ibarət ola bilər.

<head> blokundan fərqli olaraq, <body> elementinin kontenti brauzerdə görsənir:

html sənədinin strukturu

Səhifənin adını təyin edirik

<title> elementinin köməyilə səhifənin adını təyin edə bilərik. Səhifənin adı <title></title> teqlərinin içərisində yerləşdirilir.

Aşağıdakı addımları ardıcıllıqla yerinə yetiririk:

  • html qovluğunun içərisində the_html_head qovluğu yaradırıq
  • the_html_head qovluğunda title.html faylı yaradırıq

 Sonra redaktorda title.html faylına aşağıdakı kodu əlavə edirik və yadda saxlayırıq:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>The Life of Coder</title>
</head>

<body>
    <p>Mən HTML dilini öyrənirəm</p>
</body>
</html>

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

title elementi

Bu teq veb səhifə üçün çox vacibdir, çünki axtarış nəticələrində görsənən veb səhifənin adı <title> teqində yazılmış addır. Səhifənin adı 60-70 simvoldan çox olmamalı (əks halda axtarış sistemləri digər simvolları kəsərək üç nöqtə ilə əvəz edir) və səhifənin əsas məğzi bir neçə sözlə ifadə edilməlidir.

Meta teqlər

Tək teqdən ibarət olan meta teqlər veb səhifənin məzmununu brauzer, axtarış sistemləri və sosial şəbəkələr üçün təsvir edirlər.

Sənədin kodlaşdırma standartını təyin edirik

Diqqət etsəniz, yuxarıdakı nümunələrdə aşağıdakı sətir vardır:

<meta charset="utf-8">

Bu element sənədin kodlaşdırma standartını təyin edir. utf-8 demək olar ki müxtəlif dillər üzrə bütün simvolları özündə birləşdirən universal simvollar toplusudur. Bu kodlaşdırma standartından istifadə edən veb səhifə istənilən dili "tanıya" bilər. Veb səhifədə bu kodlaşdırma standartından istifadə etmək əla ideyadır! Bu halda veb səhifə, məsələn, həm ingilis, həm də yapon hərflərini düzgün göstərə bilir:

utf-8 kodlaşdırma standartı

Əgər məsələn, veb səhifədə ISO-8859-1 (latın əlifbası üçün simvollar toplusu) kodlaşdırma standartından istifadə edilibsə, o zaman yapon hərfləri düzgün görsənmir:

ISO-8859-1 kodlaşdırma standartı

Veb səhifəyə müəllif və qısa təsvir əlavə edirik

Bir çox <meta> elementləri name və content atributlarına malikdir:

  • name - meta elementin tipini təyin edir
  • content - meta məzmunu təyin edir

Veb səhifənin müəllifini və qısa təsvirini aşağıdakı kimi təyin edə bilərik:

<meta name="author" content="Emil Hüseynov">
<meta name="description" content="Burada veb səhifənin qısa təsviri yazılır">

Veb səhifənin qısa təsviri istifadəçilər tərəfindən daxil edilmiş açar sözlərə uyğun gəldikdə axtarış mühərrikləri tərəfindən nəzərə alınır.

Digər metaverilənlər

Məsələn, Facebook tərəfindən hazırlanmış Open Graph protokolu metaverilənlərdən istifadə üçün əlavə imkanlar yaradır. vebkurs.info saytının mənbə kodunda (brauzerdə CTRL + U düymələrinin köməyilə mənbə koduna baxmaq olar) aşağıdakı sətirləri görə bilərsiniz:

<meta property="og:type" content="website">
<meta property="og:url" content="https://vebkurs.info">
<meta property="og:title" content="Proqramlaşdırmanın əsaslarının öyrədilməsi">
<meta property="og:description" content="Proqramlaşdırma dərslikləri və onlayn kurslar">
<meta property="og:image" content="https://vebkurs.info/assets/images/logo-600x300.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="300">

Nəticədə vebkurs.info saytını Facebook-da paylaşmaq istədikdə, istifadəçilərə aşağıdakı kimi şəkil və təsvirdən ibarət formatda əlçatan olur:

metaverilənlər

Sayta ikonka əlavə edirik

Saytı daha yaxşı tanıtmaq üçün metaverilənlərə müxtəlif ikonkalar əlavə edə bilərsiniz. Favicon ("favorites icon" ifadəsinin qısaldılmış versiyasıdır) ən çox istifadə edilən ikonkadır. Bu ikonka veb səhifənin adının qarşısında, həmçinin seçilmiş səhifələr siyahısında görsənir.

Favicon

Veb səhifəyə favicon əlavə etmək üçün:

  1. Şəkli .gif və ya .png formatlarından birində saxlayırıq və onu saytın index.html səhifəsinin olduğu qovluqda yerləşdiririk
  2. <head> elementinin içərisində ikonka üçün bağlantı əlavə edirik
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Müxtəlif qurğular üçün müxtəlif ikonkalar göstərmək olar. Məsələn, bu, vebkurs.info saytında aşağıdakı kimi reallaşdırılıb:

<link rel="apple-touch-icon" sizes="57x57" href="/assets/images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon/favicon-16x16.png">

CSS və JavaScript-i səhifəyə qoşuruq

Müasir saytlarda vizual görünüş üçün CSS, interaktivlik üçün isə JavaScript texnologiyalarından istifadə edilir. Stil faylı səhifəyə adətən <link> elementi, skriptlər isə <script> elementinin köməyilə əlavə edilir.

  • <link> elementi <head> elementinin içərisində yerləşdirilir. Bu elementin iki atributu vardır: rel atributu səhifənin stilini, href isə stil faylının olduğu yeri təyin edir:
<link rel="stylesheet" href="style.css">
  • <script> elementini <head> elementinin içərisində yerləşdirmək mütləq deyil, əslində onu səhifənin sonunda, bağlanan </body> teqindən əvvəl yerləşdirmək daha yaxşıdır. Belə olan halda brauzer əvvəlcə səhifəni, sonra isə skripti yükləmiş olur:
<script src="app.js"></script>

HTML sənədin əsas dilini təyin edirik

HTML səhifəyə əsas dili əlavə etmək tövsiyə edilir, çünki bu halda veb səhifə axtarış sistemləri tərəfindən daha yaxşı indeksləşdirilir.

<html lang="az">

Dillər üzrə kodlar ISO 639-1 standartında müəyyənləşdirilib.

İndi isə the-html-head qovluğunda meta.html faylı yaradırıq və aşağıdakı kodu ona əlavə edirik:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Meta teqlər</title>
    <meta name="author" content="Emil Hüseynov">
    <meta name="description" content="Meta teqlər barədə qısa məlumat">

    <meta property="og:type" content="article">
    <meta property="og:description" content="Meta teqlər barədə qısa məlumat">
    <meta property="og:image" content="https://ogp.me/logo.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="300">
    <meta property="og:image:height" content="330">
</head>

<body>
    <h1>Meta teqlər</h1>

    <p>Yapon dilinə nümunə:<span lang="ja">ご飯が熱い。</span></p>
</body>
</html>

Yuxarıdakı koddan göründüyü kimi sənədin müəyyən hissəsi üçün də dil təyin etmək mümkündür. Sənədin əsas dilini azərbaycan dili təyin etmişik. Yapon dilində olan ifadə üçün yapon dili təyin etmişik.

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

meta teqlər

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

0

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