HTML, CSS və JavaScript ilə Tanışlıq

HTML, CSS və JavaScript ilə Tanışlıq

Yayın Tarihi: 09 Mart 2025

Yazar: yoxlama

Yeni Başlayanlar üçün Web İnkişafı: HTML, CSS və JavaScript ilə Tanışlıq

Bugünlərdə web inkişafı, bir çox peşəkar üçün əsas bacarıqdır. Hər kəsin gündəlik həyatında istifadə etdiyi vebsaytların yaradılması və dizaynı ilə bağlı biliklərə sahib olmaq çox faydalı ola bilər. Bu yazıda, web inkişafına başlamaq istəyənlər üçün üç əsas texnologiyadan – HTML, CSS və JavaScript-dən bəhs edəcəyik.

HTML – Vebsaytın Strukturunu Qurmaq

HTML (HyperText Markup Language), web səhifələrinin strukturunu yaratmaq üçün istifadə olunan əsas dilidir. HTML, vebsaytınızın başlıqlarını, mətnlərini, şəkillərini, keçidlərini və digər elementlərini təşkil edir. HTML sənədində, hər bir hissə bir “etiket”lə (tag) təmsil olunur. Məsələn:

  • <!DOCTYPE html>
  • <html>
  • <head>
    • <title>Vebsayt Başlığı</title>
  • </head>
  • <body>
    • <h1>Salam, Dünya!</h1>
    • <p>Bu, HTML haqqında sadə bir nümunədir.</p>
  • </body>
  • </html>

 

Yuxarıdakı nümunə HTML-in əsas strukturu ilə tanış olmaq üçün gözəl bir başlanğıcdır. Burada <h1> başlıq etiketini, <p> isə paraqraf etiketini göstərir. HTML sənədinin başında yer alan <head> və <body> etiketləri də çox vacibdir. <head> səhifənin meta məlumatlarını, <body> isə vebsaytın görünən hissəsini təşkil edir.

CSS – Vebsaytın Görünüşünü Tərtib Etmək

CSS (Cascading Style Sheets) vebsaytların dizaynını və tərtibatını yaratmaq üçün istifadə olunur. HTML, vebsaytınızın strukturunu təmin edir, amma CSS ona rənglər, şriftlər, ölçülər, marjinlər və digər dizayn elementləri əlavə edir.

Məsələn, HTML sənədindəki başlıq və paraqrafın görünüşünü CSS ilə dəyişə bilərik:

  • h1 {
    color: blue;
    font-family: Arial, sans-serif;
    text-align: center;
    }
  • p {
    color: gray;
    font-size: 18px;
    }

Yuxarıdakı CSS kodu, <h1> başlığını mavi rəngə çevirir və şriftini dəyişdirir. Eyni zamanda, <p> paraqrafının yazısını boz rəngdə göstərir və şrift ölçüsünü artırır.

CSS, vebsaytınızın fərqli ekran ölçülərində necə görünəcəyini idarə etməyə də imkan verir. Bu, responsiv dizayn adlanır və mobil cihazlar üçün əhəmiyyətlidir.

JavaScript – Vebsaytınıza Hərəkət və Funksionallıq Əlavə Etmək

JavaScript (JS), vebsaytınıza interaktivlik əlavə etmək üçün istifadə olunur. HTML və CSS ilə statik bir səhifə yarada bilərsiniz, amma JavaScript ilə vebsaytınıza istifadəçi ilə qarşılıqlı əlaqə imkanları əlavə edə bilərsiniz. JavaScript istifadə edərək formaları doğrulama, düymələrə klikləmə, animasiyalar əlavə etmə və daha çox funksiyalar edə bilərsiniz.

Misal üçün, bir düyməyə basıldıqda istifadəçiyə mesaj göstərmək üçün aşağıdakı JavaScript kodunu istifadə edə bilərik:

  • <!DOCTYPE html>
  • <html lang=”az”>
  • <head>
    • <meta charset=”UTF-8″>
    • <title>JavaScript Nümunəsi</title>
  • </head>
  • <body>
    • <button onclick=”greeting()”>Buraya kliklə!</button>
    • <script>
      • function greeting() {
        • alert(“Salam, Dünya!”);
      • }
    • </script>
  • </body>
  • </html>

Bu nümunədə, istifadəçi “Buraya kliklə!” düyməsini basdıqda, JavaScript funksiyası işləyir və bir “alert” (bildiriş) pəncərəsi açılır. Bu, sadə bir interaktiv element nümunəsidir.

Nəticə

Web inkişafı ilə maraqlanırsınızsa, HTML, CSS və JavaScript öyrənmək sizin üçün ilk addımlar olacaq. HTML səhifənin strukturunu, CSS dizaynını və JavaScript isə dinamik və interaktiv funksionallıqları təmin edir. Bu üç texnologiya, vebsayt qurmağın əsas daşlarını təşkil edir.

Bu yazı, web inkişafına yeni başlayanlar üçün HTML, CSS və JavaScript-in əsaslarını tanıtmağa yönəlib. Hər üçü arasındakı əlaqələri başa düşmək, web proqramlaşdırmaya daha dərindən yiyələnmək üçün vacib bir addımdır. İrəlilədikcə, bu dilləri daha inkişaf etmiş üsullarla və ən yaxşı təcrübələrlə istifadə etməyə başlayacaqsınız.

Unutmayın ki, web inkişafı təcrübə və davamlı öyrənmə tələb edir. Bu sahədə daha da irəlilədikcə yeni texnologiyaları və alətləri öyrənmək sizi daha yaxşı bir inkişaf etdirici edəcək!

 

Digər məqalələr