HTML nədir və necə işləyir?

Frontend proqramlaşdırmaya yeni başlayırsınızsa, qarşınıza çıxan ilk texnologiyalardan biri HTML olacaq. Bəs HTML nədir, nə üçün istifadə olunur və brauzer yazdığımız HTML kodunu necə veb səhifəyə çevirir?

HTML veb səhifənin əsas strukturunu yaratmaq üçün istifadə olunan markup dilidir. Başlıq, mətn, şəkil, link, menyu, siyahı, forma və digər məzmunların səhifədə hansı məna və strukturla yerləşəcəyini HTML vasitəsilə müəyyən edirik.

Sadə desək, bir veb saytı bina kimi düşünsək, HTML həmin binanın əsas konstruksiyasıdır. CSS onun görünüşünü formalaşdırır, JavaScript isə səhifəyə interaktivlik əlavə edir.

Frontend sahəsinə başlamağı düşünürsünüzsə, əvvəlcə frontend developer-in nə iş gördüyünü başa düşmək HTML, CSS və JavaScript-in bir-biri ilə əlaqəsini daha rahat anlamağa kömək edə bilər.

HTML nədir?

HTML — HyperText Markup Language ifadəsinin qısaltmasıdır.

Burada vacib məqam HTML-in proqramlaşdırma dili olmamasıdır. HTML bir markup language, yəni işarələmə dilidir. Onun əsas işi hesablamalar aparmaq və ya proqram məntiqi qurmaq deyil, səhifədəki məzmunun strukturunu və mənasını müəyyən etməkdir.

Məsələn, HTML-də əsas başlıq üçün h1, paraqraf üçün isə p elementi istifadə olunur.

Sadə nümunə:

<h1>HTML nədir?</h1>

<p>HTML veb səhifənin strukturunu yaratmaq üçün istifadə olunur.</p>

Burada h1 səhifənin əsas başlığını, p isə paraqrafı göstərir.

Brauzer bu kodu oxuyur və istifadəçiyə HTML kodunun özünü deyil, formatlaşdırılmış səhifəni göstərir.

HTML elementlərinin əksəriyyəti tag-lardan yaradılır və elementlər funksiyalarına görə mətn, multimedia, form, section və digər kateqoriyalara ayrılır.

HTML nə üçün istifadə olunur?

HTML-in əsas məqsədi veb səhifədəki məlumatı strukturlaşdırmaqdır.

Məsələn, bir blog səhifəsində aşağıdakı hissələr ola bilər:

• əsas başlıq;
• məqalənin mətni;
• şəkillər;
• digər səhifələrə keçidlər;
• müəllif haqqında məlumat;
• əlaqəli məqalələr;
• əlaqə forması.

Bunların hər biri HTML elementləri ilə səhifəyə əlavə edilə bilər.

Məsələn, bir səhifədə:

<h1>Frontend proqramlaşdırma</h1>

<p>Frontend istifadəçinin gördüyü interfeys hissəsidir.</p>

<img src="frontend.webp" alt="Frontend proqramlaşdırma">

<a href="/portfolio">Portfolioya bax</a>

kimi elementlərdən istifadə etmək mümkündür.

Burada HTML bizə başlığın başlıq, mətnin paraqraf, şəklin şəkil və keçidin link olduğunu bildirir.

HTML necə işləyir?

İstifadəçi brauzerdə bir səhifəni açanda serverdən həmin səhifəyə aid resurslar əldə edilir.

Brauzer HTML sənədini oxuyur, elementləri analiz edir və səhifənin strukturunu qurur. CSS həmin strukturun necə görünəcəyini, JavaScript isə səhifədəki interaktiv davranışların necə işləyəcəyini müəyyən edə bilər.

Sadələşdirilmiş formada proses belədir:

1. HTML → struktur
2. CSS → dizayn
3. JavaScript → interaktivlik

Məsələn, HTML ilə bir button yarada bilərik:

<button>Ətraflı bax</button>

CSS ilə onun görünüşünü dəyişə, JavaScript ilə isə klikləndikdə hansı əməliyyatın baş verəcəyini müəyyən edə bilərik.

Buna görə HTML-i öyrənmək frontend proqramlaşdırmanın əsas mərhələlərindən biridir.

HTML tag və element nədir?

HTML öyrənərkən “tag” və “element” sözlərini tez-tez görəcəksiniz.

Məsələn:

<p>Salam dünya!</p>

Burada:

<p> — açılış tagıdır.

</p> — bağlanış tagıdır.

Bütün struktur isə HTML elementidir.

Başqa nümunə:

<h2>Frontend nədir?</h2>

Burada h2 bu mətnin ikinci səviyyəli başlıq olduğunu bildirir.

HTML-də istifadə olunan elementlərin siyahısı kifayət qədər genişdir və onlar səhifədə gördüyümüz müxtəlif məzmun növlərini strukturlaşdırmağa imkan verir.

Ən çox istifadə olunan HTML tagları hansılardır?

Yeni başlayan zaman bütün HTML taglarını əzbərləməyə ehtiyac yoxdur. Əsas tagların hansı məqsədlə istifadə olunduğunu bilmək kifayətdir.

Məsələn:

h1-h6 — başlıqlar

p — paraqraf

a — link

img — şəkil

ul və li — siyahı

Real layihələrdə bunlardan əlavə header, nav, main, section, article, footer, form, input və button kimi elementlərlə də tez-tez işləyəcəksiniz.

HTML attribute nədir?

HTML elementlərinə əlavə məlumat vermək üçün attribute istifadə olunur.

Məsələn:

<a href="https://example.com">Sayta keç</a>

Burada href linkin istifadəçini hansı ünvana aparacağını müəyyən edir.

Şəkildə isə:

<img src="html.webp" alt="HTML səhifə strukturu">

src şəklin ünvanını, alt isə şəklin məzmununu izah edir.

Attribute-lar element haqqında məzmunun özündə olmayan əlavə məlumat vermək üçün istifadə olunur.

Sadə HTML səhifəsi necə yaradılır?

Ən sadə HTML sənədlərindən biri bu strukturda ola bilər:

<!DOCTYPE html>

<html lang="az">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mənim ilk HTML səhifəm</title>

</head>

<body>

<h1>Salam!</h1>

<p>Bu mənim ilk HTML səhifəmdir.</p>

</body>

</html>

Burada hər hissənin öz funksiyası var.

• <!DOCTYPE html> brauzerə sənədin müasir HTML sənədi olduğunu bildirir.
• html sənədin əsas root elementidir.
• head istifadəçinin əsas səhifə məzmununda görmədiyi metadata və digər texniki məlumatları saxlaya bilər.
• title brauzer tabında göstərilən səhifə başlığını müəyyən edir.
• body isə istifadəçinin səhifədə gördüyü əsas məzmunu saxlayır.

Semantic HTML nədir?

HTML yalnız elementləri səhifəyə yerləşdirmək üçün deyil, onların mənasını göstərmək üçün də istifadə olunur. Məsələn, nəzəri olaraq səhifənin bir çox hissəsini div ilə qurmaq mümkündür.

Amma real layihələrdə daha mənalı elementlərdən istifadə etmək daha düzgün struktur yaradır:

1. header — səhifənin və ya bölmənin üst hissəsi
2. nav — naviqasiya
3. main — əsas məzmun
4. article — ayrıca məqalə və ya kontent
5. section — məzmun bölməsi
6. footer — səhifənin və ya bölmənin alt hissəsi

Buna semantic HTML yanaşması deyilir.

Semantic elementlər düzgün istifadə edildikdə kodun strukturunu daha aydın və idarəolunan edir.

HTML və SEO arasında əlaqə nədir?

HTML frontend ilə SEO-nun bir-birinə ən çox toxunduğu nöqtələrdən biridir. Google səhifənin məzmununu və strukturunu anlamaq üçün səhifədəki müxtəlif siqnallardan istifadə edir. Buna görə düzgün heading iyerarxiyası, səhifə title-ı, linklər, şəkillərin alt text-ləri və semantik struktur SEO baxımından da nəzərə alınmalıdır.

Məsələn:

1. h1 — səhifənin əsas mövzusu
2. h2 — əsas alt mövzular
3. h3 — həmin alt mövzuların daxilindəki daha spesifik bölmələr

Bu struktur həm istifadəçiyə məqaləni rahat oxumağa imkan verir, həm də məzmunun iyerarxiyasını aydın saxlayır.

Heading, title, daxili link və şəkil optimizasiyasının SEO daxilində necə istifadə olunduğunu ayrıca On-page SEO bələdçisində izah etmişəm.

HTML strukturunun real layihələrdə frontend və SEO ilə birlikdə necə tətbiq olunduğuna baxmaq istəyirsinizsə, SEO və frontend layihələrimə də nəzər sala bilərsiniz.

HTML veb sayt hazırlanmasında hansı rol oynayır?

HTML veb saytın əsas strukturunu yaradır və real layihədə development prosesinin ilk texniki hissələrindən biridir. Amma veb sayt hazırlanması yalnız HTML yazmaqdan ibarət deyil. Real layihədə planlama, səhifə strukturu, dizayn, responsive development, JavaScript funksionallığı, SEO optimizasiyası, test və yayımlama kimi mərhələlər də olur.

HTML bu prosesdə səhifənin əsas strukturunu yaradır. Sonra CSS ilə həmin struktur dizayn edilir, JavaScript ilə interaktivlik əlavə olunur və digər texniki optimizasiyalar həyata keçirilir.

Bir layihənin planlamadan development və yayıma qədər necə hazırlandığını saytların hazırlanması mərhələləri məqaləsində daha ətraflı izah etmişəm.

HTML öyrənərkən ən çox edilən səhvlər

Yeni başlayanların etdiyi səhvlərin böyük hissəsi mürəkkəb koddan yox, əsas strukturu düzgün qurmamaqdan yaranır.

Tagları düzgün bağlamamaq

Məsələn:

<p>Salam

əvəzinə:

<p>Salam</p>

yazmaq daha düzgün strukturdur.

Bəzi HTML elementləri ayrıca closing tag tələb etmir, ona görə hər elementin sintaksisini ayrıca öyrənmək lazımdır.

Heading-ləri yalnız ölçüsünə görə seçmək

h1, h2 və h3 yalnız mətnin böyük və ya kiçik görünməsi üçün seçilməməlidir. Onlar məzmun iyerarxiyasını ifadə edir. Vizual ölçü və dizayn CSS ilə idarə edilməlidir.

Hər yerdə div istifadə etmək

div çox faydalı elementdir, amma səhifənin bütün strukturunu yalnız div elementləri ilə qurmaq həmişə yaxşı seçim deyil. Uyğun yerdə header, nav, main, article, section və footer kimi semantik elementlərdən istifadə etmək kodu daha aydın edir.

Şəkillərdə alt attribute-u nəzərə almamaq

Şəkillərin məqsədinə uyğun alt mətninin verilməsi accessibility baxımından vacibdir və axtarış sistemlərinə şəkil haqqında əlavə kontekst verə bilər.

HTML, CSS və JavaScript-i qarışdırmaq

Başlanğıcda bu üç texnologiyanın rolunu ayırmaq vacibdir.

1. HTML səhifənin strukturunu yaradır.
2. CSS görünüşünü idarə edir.
3. JavaScript davranış və interaktivlik əlavə edir.

Bu fərqi başa düşdükdən sonra frontend öyrənmək xeyli rahatlaşır.

HTML öyrəndikdən sonra nə öyrənmək lazımdır?

HTML frontend üçün başlanğıcdır, amma təkbaşına müasir veb tətbiq hazırlamaq üçün kifayət etmir.

Normal öyrənmə ardıcıllığı belə ola bilər:

HTML → CSS → JavaScript → Git → React

HTML ilə struktur qurmağı öyrəndikdən sonra CSS vasitəsilə həmin strukturu dizayn etməyi, daha sonra JavaScript ilə səhifəyə interaktivlik əlavə etməyi öyrənmək məntiqlidir.

Bundan sonra React kimi texnologiyalara keçmək daha rahat olur.

Frontend və SEO-nun eyni layihədə necə birlikdə istifadə oluna bildiyini real iş nümunələri ilə görmək istəyirsinizsə, portfolio səhifəsinə baxa bilərsiniz.

Nəticə

HTML nədir sualının ən sadə cavabı budur: HTML veb səhifənin məzmununu və strukturunu yaratmaq üçün istifadə olunan işarələmə dilidir.

Başlıqlar, paraqraflar, linklər, şəkillər, formalar və səhifənin semantik hissələri HTML elementləri vasitəsilə qurulur. CSS və JavaScript daha sonra bu strukturun görünüşünü və davranışını inkişaf etdirir.

Frontend proqramlaşdırmaya yeni başlayırsınızsa, HTML-i sadəcə tagları əzbərləməklə deyil, kiçik səhifələr quraraq öyrənmək daha faydalıdır. Bir başlıq, menyu, mətn, şəkil, link və formadan ibarət sadə səhifə hazırlamaq belə əsas anlayışları praktikada görməyə kömək edir.

Növbəti mərhələdə isə HTML ilə yaratdığımız bu strukturun CSS vasitəsilə necə dizayn edildiyini öyrənəcəyik.