17 İyun 2025 | İT

HTML nədir və necə yaradılır? - HTML haqqında hər şey

59 baxış

HTML nədir? haqqında hər şey!

İnternetdən istifadə edirsinizsə, həyatınızda bir dəfə də olsa HTML sözü ilə qarşılaşmısınız. Tam adı Hyper Text Markup Language - HTML olan bu ifadə azərbaycan dilinə “Hipermətn işarələmə dili” kimi tərcümə edilir. HTML veb-səhifələrin hazırlanmasında istifadə olunan əsas dildir. Proqramlaşdırma dili olaraq qəbul edilməyən bu işarə dilinin əsas vəzifəsi veb-brauzerə (məsələn, Chrome, Firefox, Safari və s.) göstərmək istədiyimiz məzmunun necə qurulduğunu bildirməkdir. Yəni html-lər brauzerə nəyi necə göstərmək lazım olduğunu bildirir. İstənilən veb-səhifənin arxa planında HTML kodu olur və digər texnologiyalarla birlikdə (CSS, JavaScript) işləyərək interaktiv və cəlbedici saytlar yaratmağa imkan verir. Sosial şəbəkələrdən xəbər portallarına, onlayn mağazalardan bloqlara qədər hər bir veb-səhifənin quruluşu html vasitəsilə yaradılır. HTML-lər olmasaydı göz oxşayan dizaynlı veb-səhifələr, keçid etdiyimiz linklər, bəyəndiyimiz vizuallar sadəcə məlumat yığınından ibarət olardı.

HTML faylı necə hazırlanır?

HTML necə işləyir?

HTML qısa kod parçalarının mətn faylına yazılmasından ibarətdir. Bu kodlar HTML-in imkanlarını təmin edən etiketlərdir. Bir veb-səhifə yaratmaq üçün HTML sənədi hazırlanır. Bu sənəd mətn formatında olur və .html uzantısı ilə saxlanılır. Sənədin daxilində mətn, şəkillər, linklər, cədvəllər, video və digər elementlər yerləşdirilir. Hər bir element xüsusi açıq və bağlanan etiketlər vasitəsilə işarələnir. Məsələn, bir başlıq <h1>Başlıq</h1>, bir abzas isə <p>Bu, abzas mətnidir.</p> şəklində yazılır. HTML yazmaq üçün etiketlərdən düzgün istifadə etmək vacibdir ki, müəllifin yaratmaq istədiyi vizual görünüş əldə olunsun. Brauzer html sənədini serverdən və ya lokal fayldan əldə edir və sənəddəki etiketləri analiz edərək onu vizuallaşdırır. Məsələn, <h1> etiketi ilə göstərilən başlıq brauzerdə iri və qalın mətn kimi görünəcək. HTML-in işləmə prinsipinə veb-səhifənin strukturlu olması da daxildir. Məsələn, <header>, <nav>, <main>, <footer> kimi semantik etiketlər brauzerə və digər texnologiyalara səhifənin hansı hissəsinin nə məqsədlə istifadə edildiyini bildirir. Bu, axtarış sistemlərinin səhifəni daha yaxşı indeksləməsinə və əlçatanlıq alətlərinin istifadəçilərə səhifənin strukturunu anlamaqda kömək etməsinə şərait yaradır. Bundan başqa, göz oxşayan veb-sayt dizaynları sadəcə html vasitəsilə hazırlanmır. Müxtəlif texnoloji vasitələrin köməyi ilə proses tamamlanır. Belə ki, CSS (Cascading Style Sheets) vasitəsilə html elementləri rənglər, şriftlər, arxa planlar, boşluqlar və s. kimi xüsusiyyətlərlə canlanır. JavaScript ilə isə səhifələrin interaktivliyi təmin edilir. Məsələn, hər hansısa səhifədə “Başla” düyməsini sıxarkən menyu açılır və s.

HTML etiketləri nədir? Nə iş görür?

HTML sənədini əslində adi mətn faylı kimi düşünə bilərik. Amma onun içindəki xüsusi açar sözlər və strukturlaşdırılmış etiketlər vasitəsilə brauzer bu mətni vizuallaşdırılmış və istifadəçi üçün rahat görünən veb-səhifəyə çevirir. Yəni, bu etiketlərin köməyi ilə biz mətnin hansı hissəsinin başlıq, hansı hissəsinin link, hansı hissəsinin şəkil və ya cədvəl olduğunu bildiririk. HTML etiketi dedikdə, < > künc mötərizələri arasında yazılan xüsusi açar sözlər nəzərdə tutulur. Demək olar ki, bütün HTML teqlərinin açılış və bağlanış versiyası olur:

Açılış etiketi bu cürdür: <etiket>
Bağlanış etiketi isə belədir: </etiket>

Bağlanış etiketində sadəcə mötərizənin daxilində ilk hissəyə / işarəsi əlavə olunur. Məsələn, abzas yazılması formasına baxaq:

html

<p>Bu, bir abzasdır.</p>

Brauzer bu kodu oxuyur və istifadəçiyə sadə mətn abzası kimi göstərir.

HTML sənədinin quruluşu

İndi isə gəlin HTML sənədinin strukturuna və ətraflı izahına baxaq:

AD_4nXdE-rsosRj8UmwKHgmQqmJSmWIxj43ZsTrAa3VHLm1dOQFazPE9cH8QsD8nosBR5dT0nSSMo9Lu8-j99U3L2Hu0YndntDdRiV8Mi9SOevPYyKq3wNKOYFhcA8fcIWC3fM_gQ_aQwA?key=0g61K6QYmtKmSzW3gb92_w6u

<!DOCTYPE html> - Brauzer bunun HTML5 sənədi olduğunu anlayır.
<html> - HTML sənədinin əsas konteyneridir, bütün məzmun onun içində olur.
<head> - Səhifənin texniki hissəsidir. Burada başlıq, xarici fayllar (məsələn, CSS, JavaScript), meta məlumatlar yerləşir.
<title> - Brauzerin tabında görünən səhifənin adını müəyyənləşdirir.
<body> - İstifadəçilərin brauzerdə gördüyü hissə buradadır: mətn, şəkil, linklər və s.

Əsas istifadə olunan HTML etiketləri

Başlıqlar
Başlıqlar veb-səhifəni mətn cəhətdən bölmək üçün çox vacibdir. Bunlar <h1>-dən <h6>-ya qədər dəyişir:

<h1> - Ən vacib başlıq (səhifənin əsas adı)
<h2> - Bölmə başlığı
<h3>, <h4>, <h5>, <h6> - Kiçik başlıqlar

Abzaslar

Müxtəlif mətn hissələrini yazmaq üçün <p> etiketi istifadə olunur.

Linklər (keçidlər)

Bir səhifədən başqa bir səhifəyə keçmək üçün <a> etiketi istifadə olunur. href atributu vasitəsilə linkin ünvanı göstərilir.

AD_4nXeOTnXOkEzZD19HqA8LLWgessnTXIwmNZobk5LlETuD9DmxMFhxVQ0ykVwK6IZp764ewMzGOmeHQKJsxmA_BQgVSZ1uKrl1HF83MENlBC43W39XINH7xGyNc_ocHuf5GyMlVTlrKQ?key=0g61K6QYmtKmSzW3gb92_w6u

Şəkillər

Şəkil əlavə etmək üçün <img> etiketi istifadə olunur. Bu etiketi bağlamağa ehtiyac yoxdur, çünki o özündə məlumat daşıyır.

AD_4nXcVb2P5CzRWXJI384Se3GxjYMlbHLmTk4wo6qqomIMQUnD68CC6v69TIKBTb6iINSTUsEgQCKEGFva1_uc58TK6kZXzL5Ta1oS-g3IGlM8NLjScZ1-dDVs0r8oDzuUHCjo7Fxnk?key=0g61K6QYmtKmSzW3gb92_w6u

src - şəkilin fayl ünvanı
alt - şəkil yüklənməyəndə və ya görmə imkanları məhdud istifadəçilər üçün alternativ mətn

Siyahılar

İki cür siyahı mövcuddur:

Sırasız siyahı: <ul> (bullet points)
Sıralı siyahı: <ol> (nömrələnmiş)
Siyahının hər bir elementi <li> etiketi ilə göstərilir.

AD_4nXdlPbX72YvcQct7ThHzSTFX0z7uUX0PJMlPq37-MCImXw5PtzIaAmVWQ8NHKmt6qrnY_rOY4Dx5wUEwQX2ipOm8xzIBfQHSxOg4owEr9oIf5B223Cmh9q2ZR5TcQ_oUum7m6PLVhg?key=0g61K6QYmtKmSzW3gb92_w6u AD_4nXcZ4uRfGedSyLunBK4qvWu4jRLhbe8cFel-Cjw-gVbFqFDyWjC8V-T5twKJOGf5Wp1xTs61MPNrrr0AeEy2ObX4unA3X8I9qDEVQHLDPX9WsZmiTfvDvky9uegn0yPUIjtXN3kfBg?key=0g61K6QYmtKmSzW3gb92_w6u

Cədvəllər

Məlumatı cədvəl şəklində göstərmək üçün aşağıdakı etiketlərdən istifadə olunur:

AD_4nXfDfI_r1AKkJhfCCnQNRBe5y2tKLbamcvMhaIwyaDzg89sXnnHKIrwuke3XTlYo-5Bwz64Em9lqLnSIXQuq_u7PsipINRYIsArk8wwbZQ8iVLcLmZ7mlHfQ17cPJK9WN1Cdw7as?key=0g61K6QYmtKmSzW3gb92_w6u

<table> - Cədvəlin başlanğıcı

<tr> - Sətir

<th> - Başlıq hüceyrəsi

<td> - Məlumat hüceyrəsi

Semantik etiketlər
HTML5 ilə birlikdə veb-səhifənin məzmununu daha mənalı və aydın etmək üçün semantik etiketlərdən istifadə olunur:

<header> - Səhifənin və ya bölmənin başlıq hissəsi
<nav> - Naviqasiya (menyu) hissəsi
<main> - Əsas məzmun sahəsi
<section> - Bölmə
<article> - Müstəqil məqalə və ya yazı
<aside> - Əlavə məzmun (yan menyu və ya əlavə məlumat)
<footer> - Alt məlumat hissəsi (əlaqə, müəllif hüquqları və s.)

Ən çox rast gəlinən html səhvləri hansılardır?

Yeni veb-sayt açmaqdan tutmuş hazırda fəaliyyət göstərən veb-saytlara qədər html problemləri qaçılmazdır. Çünki bəzən kiçik detallar, nüanslar diqqətdən yayına bilər. HTML-in düzgün işləməsi üçün yazılan kodun dəqiq və qaydalara uyğun olması şərtdir. Əks halda səhifənin görünüşündə, işləmə prinsiplərində və hətta axtarış motorlarının onu necə indeksləməsində problemlər yarana bilər. Odur ki təcrübədə ən çox rast gəlinən səhvlərə birlikdə nəzər salaq.

Etiketləri düzgün açıb-bağlamamaq

Yadda saxlamaq lazımdır ki, etiket açarkən < işarəsi ilə başlayıb sonluğu bu cür /> tamamlamaq mütləqdir. Əks halda yazdığınız kod oxunmayacaq. Ümumilikdə html faylı yaratmaq üçün adətən işləyəcəyiniz onlayn kod studiylarında hazır etiketlər olur ki, yaratmaq istədiyiniz etiketin adına uyğun axtarış etdikdə onlarla tanış ola və kod yazarkən bunlardan sitifadə edə bilərsiniz.

Şəkillər əlavə edərkən alt atributundan istifadə etməmək

<img> etiketi yaradarkən alt atributundan sitifadə çox vacibdir. Bu atribut SEO üçün faydalıdır və əlçatanlığı artırır (məsələn, görmə imkanları məhdud istifadəçilər üçün).

Nümunə: <img src="sekil.jpg" alt="Məhsulun şəkli">

Semantik etiketlərdən istifadə etməmək

Təcrübədə əksərən <div> və <span> etiketlərinə üstünlük verilsə də, əslində semantik etiketlər də səhifənizin istifadəçi yönümlülüyünü artırır.

Doctype-un qeyd edilməməsi

html sənədinin əvvəlində <!DOCTYPE html> bəyannaməsini əlavə etmək unudulan nüanslardandır. Odur ki faylın nümunə olduğu kimi adlandırılması vacibdir: <!DOCTYPE html> <html>...</html>

Atributların düzgün qoyulmaması

Bütün atribut dəyərləri qoşa dırnaqlar və ya tək dırnaqlar ilə verilməlidir.

<a href="https://example.com">Daha ətraflı məlumat burada!</a>

Əsas struktur teqlərindən mütləq istifadə edilməlidir

HTML sənədində həmişə <html>, <head> və <body> teqləri olmalıdır. Bu nüansa nəzər yetirməsəniz, səhifənin strukturu gözləntilərinizin əksinə tamamilə fərqli ola bilər.

AD_4nXdDnwwUN2DinE6ymuNk599BNRBE7dSv2dkY3oNFbcSQ0GEM3AZGNJvcYytbiU4EnLUBwCimby1gFICHXSItGp7_flQMKBVfYy1Mt-6m8TiKbH0tBsQk5HoGZQY4rJi14kzhmTpqBQ?key=0g61K6QYmtKmSzW3gb92_w6u

Əksik və ya təkrarlanan id dəyərləri

HTML sənədində bir id-dən yalnız bir dəfə istifadə etmək, təkrarçılıqdan qaçmaq lazımdır. Bunu etmədikdə JavaScript və CSS-nin işləməsinə problem yaradır.

X V

AD_4nXfVaYpEfKzW7BWeYjw_ghsHzLZg_PLgcoa9iRS6njQOvi-BwM_Xn7lTq65BAEZoW4JAxp-0Vlof3tbTj7wypoEbQhEXt0LrOy1GehKUcj0UQoCJivPMSHKqBrCOxdzjzNF4fCQ3?key=0g61K6QYmtKmSzW3gb92_w6u AD_4nXcZUGg2C7BSEmjNiRTBdLtWBf5w_3XQHQ6uVnVkcxY1DakWCNywdWPD2ZCNYtjMiK3vb2IgFKerBgB0jbM2f5OPnDrfV73P1C_G4Xlj80qkYzgwV28SVPIPd67nkwwaj-xx6QtwGw?key=0g61K6QYmtKmSzW3gb92_w6u

HTML faylını harada yaratmaq olar?

html faylı yaratmaq üçün sizdən ağır proqramları cihazınıza yükləmək, yaxud bahalı proqramlar almaq tələb olunmur. Hətta telefonunuzda da html sənədinin kodlarını yaza bilərsiniz. Dediyimiz kimi mətn redaktə edə biləcəyiniz vasitə və brauzerinizdə istifadə lazım olacaq.

HTML yaratmaq proqramları

Windows üçün:

Notepad (Sadə mətn redaktoru)
Visual Studio Code (tövsiyə olunur)
Notepad++

Mac üçün:

TextEdit (Plain Text rejimdə)
Visual Studio Code
Onlayn html redaktorları

Daha rahat işləmək üçün aşağıdakı saytlarda html kodlarını yaza və dərhal nəticəni görə bilərsiniz.

html faylından kimlər və hansı məqsədlərlə istifadə edir?

HTML kod yaratmaq və HTML sənədi hazırlamaq internetdə mətn, şəkil, video, link, düymə və digər məzmunların vizual şəkildə təqdim olunması üçün əsas vasitədir. Bu bacarıq müxtəlif sahələrdə olan insanlar üçün faydalı, bəzən isə vacib ola bilər. Gəlin görək html-lər barədə məlumatlı olmaq kimlərin işinə daha çox yarayır.

Veb proqramçılar və tərtibatçılar

Veb-saytlar və tətbiqlər hazırlayarkən html-dən istifadə mütləqdir.

Dizaynerlər

Sayt dizaynı ilə məşğul olanlar HTML kodun necə işlədiyini bilməklə daha uyğun dizaynlar yarada bilirlər.

Kontent yaradıcıları
Jurnalistlərdən tutmuş influnserlərə qədər bütün kontent yaradıcıları məqalə, şəkil yayımlamaq və link yerləşdirmək üçün HTML-dən istifadə edirlər.
SEO mütəxəssisləri

Saytın axtarış sistemlərində necə indeksləndiyini anlamaq üçün SEO mütəxəssislərinin HTML strukturunu bilməsi mütləqdir.

Kiçik biznes sahibləri və frilanserlər
Məhsul və xidmət satışı ilə məşğul olan hər kəsin html barədə məlumatlı olması onların işlərini daha da asanlaşdırar. Çünki istənilən halda daha geniş auditoriyaya çatmaq üçün gec-tez veb-sayt yaratmaq lazım gələcək.

html öyrənmək üçün pulsuz kurslar var?

Günümüzdə istənilən sahəni internetdən öyrənmək bir toxunuş qədər rahatdır. Üstəlik bir çox platformalar, universitetlər pulsuz dərsliklər, kurslar, öyrənmək üçün videoçarxlar təqdim edir. İndi isə gəlin html öyrənmək üçün pulsuz kurslardan nələr var, onlardan bəziləri ilə tanış olaq.

freeCodeCamp - Responsive Web Design (HTML&CSS)

Bu kursa qoşularaq HTML və CSS öyrənmək imkanlarını dəyərləndirmək imkanı əldə edirsiniz. Həmçinin real layihələr üzərindən çalışmaq imkanı mövcuddur.

W3Schools - HTML Tutorial

Burada html yaratmaq barədə məlumatlarla tanış ola, biliklərinizi artıraraq real nümunələr yaratmağa başlaya bilərsiniz. 200-dən çox interaktiv nümunə və testlər mövcuddur.

Codecademy - Learn HTML

Bu kursda öyrədici modullar, testlər və mini‑layihələr yer alır. Süni İntellektin köməyi ilə avtomatik rəy sistemi də mövcuddur.

Yuxarıda qeyd olunanlar onlayn kurs mənbələridir ki, heç bir pul xərcləmədən ilkin biliklərinizi artırmağa kömək edəcək. Daha sonra sahə üzrə peşəkar fəaliyyət göstərən SEO mütəxəssislərinin, mentorların, peşəkar SEO kurslarının dərslərinə qoşula bilərsiniz. Qeyd edək ki, html biliklərinizi inkişaf etdirməklə bu sahə üzrə yüksək gəlirli karyera qura, həm tam ştat, həm də məsafədən çalışmaq imkanlarını dəyərləndirə bilərsiniz. Odur ki elə uzağa getmədən saytımızda mentorlardan tutmuş vakansiyalara qədər axtardığınız bütün məlumatları tapa bilərsiniz.

HTML-siz sayt olmaz, olsa da o sayt olmaz!

Veb-saytların danışan, vizuallaşdıran, hətta bəzən bizimlə deyib-gülən dili olan html-lər olduqca vacib və maraqlı olması ilə seçilir. Hər bir html faylı oxuduğunuz xəbərlərin, bəyəndiyiniz vizualların, gecə-gündüz vaxt keçirdiyiniz bütün veb-saytların, portalların, platformaların yaradıcı təməl daşlarıdır. Odur ki istər bu istiqamətdə karyera qurun, istər veb-sayt açmağa hazırlaşın, istərsə də biznes sahibi olun html hər zaman öz prioritetliyini qoruyan mövzu olacaqdır. Unutmayaq ki, texnologiya dəyişsə də, HTML-in rolu dəyişmir, o, daim yenilənir, güclənir və veb aləmin önəmli dili olaraq qalmağa davam edir. Bu səbəbdən HTML öyrənmək, sadəcə kod yazmaq deyil gələcəyin rəqəmsal dilinə bələd olmaq və onu öz xeyrinə dəyişməkdir.

Dostunla paylaş: