17 İyun 2025 | İT
HTML nədir və necə yaradılır? - HTML haqqında hər şey
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:
- <!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.
Şə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.
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.
Cədvəllər
Məlumatı cədvəl şəklində göstərmək üçün aşağıdakı etiketlərdən istifadə olunur:
<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.
Nümunə: <div class="footer">Müəllif hüquqları © 2025</div> əvəzinə <footer>Müəllif hüquqları © 2025</footer> istifadə etmək daha yaxşı olar.
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.
Ə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
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.
