HTML/CSS

HTML veb səhifənin quruluşunu yazmaq üçün istifadə olunan işarələmə dilidir. Başlıq, abzas, şəkil, keçid və forma HTML ilə səhifəyə yerləşdirilir. HTML proqramlaşdırma dili deyil. O, brauzerə «burada nə var» deyə məlumat verir.

CSS həmin quruluşun görünüşünü yazır. Rəng, ölçü, şrift, boşluq və elementlərin yan-yana və ya alt-alta düzülməsi CSS-in işidir. CSS də proqramlaşdırma dili deyil. O, üslub dilidir.

Brauzer əvvəl HTML-i oxuyur, sonra CSS qaydalarını uyğun elementlərə tətbiq edir. Səhifənin davranışı, məsələn düyməyə basılanda nə baş verməsi, adətən JavaScript ilə yazılır.

HTML və CSS veb səhifənin görünən hissəsində istifadə olunur:

• Məqalə və sadə saytlar
• Formalar və düymələr
• Menyu və səhifə düzülüşü
• Şəkil və mətnin yerləşdirilməsi
• Telefon və kompüter ekranına uyğun görünüş

Bir çox veb tətbiqin gördüyünüz qatı da HTML və CSS üzərində qurulur. Məlumatı hesablamaq və saxlamaq isə başqa hissənin işidir.

HTML və CSS ilə səhifənin quruluşunu və görünüşünü hazırlamaq olar:

• Başlıq və mətn yazmaq
• Şəkil və keçid əlavə etmək
• Düymə və formanın görünüşünü vermək
• Elementləri sətir və sütun kimi düzmək
• Ekranın eninə görə görünüşü dəyişmək

Sadə nümunə

<h1>Nibras Code</h1>
<p>Sadə səhifə.</p>

Bu HTML bir başlıq və bir abzas yaradır. Rəng və ölçü üçün ayrıca CSS yazılır.

İlk HTML səhifəsini yazmaq çətin deyil. Bir neçə teq və bir CSS qaydası ilə brauzerdə nəticə görünür. Çətinlik səhifə böyüdükcə, elementlər bir-birinin içində qarışanda və eyni görünüşü bir neçə ekranda saxlamaq lazım olanda başlayır.

Başlanğıc üçün bu sıra faydalıdır:

1. Başlıq, abzas, keçid və şəkil teqləri
2. Teqin açılışı və bağlanışı
3. CSS selektoru: hansı elementə tətbiq olunur
4. Rəng, şrift və kənar boşluq
5. Elementin eni və hündürlüyü
6. Elementləri yan-yana düzmək
7. Kiçik bir səhifəni özün yazmaq

Hazır şablonu kopyalamaqdan çox, kiçik səhifəni özün dəyişmək daha yaxşı öyrədir.

Üstünlükləri

• Sadə səhifə brauzerdə birbaşa açılır
• Başlanğıc nümunələr qısadır və nəticə dərhal görünür
• Demək olar ki, bütün veb səhifələr bu iki dilin üzərindədir
• HTML məzmunu, CSS isə görünüşü ayrı saxlamağa kömək edir
• Dilin özü üçün ayrıca ödəniş yoxdur

Çatışmazlıqları

• Tək başına hesab, giriş və məlumat məntiqi yazmır
• Böyük saytda CSS qaydaları bir-birinə qarışa bilər
• Eyni səhifəni bir neçə brauzerdə yoxlamaq lazım gəlir
• Görünüş düzəlmirsə, səbəb çox vaxt teqin səhv bağlanması və ya selektorun uyğun gəlməməsidir

HTML elementi adətən açılış və bağlanış teqindən ibarətdir. CSS qaydası isə selektor və əyri mötərizə içindəki xüsusiyyətlərdən ibarətdir.

HTML

<h1>Nibras Code</h1>
<p>Bu bir abzasdır.</p>
<a href="https://nibrascode.com">Sayta keç</a>

CSS

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

p {
  line-height: 1.6;
}

Harada yazılır

CSS ayrı faylda saxlanıb HTML-ə bağlana bilər. Kiçik nümunədə isə style teqinin içində də yazıla bilər. Böyük səhifədə ayrı fayl daha səliqəlidir.

Kiçik səhifə

<!DOCTYPE html>
<html lang="az">
  <head>
    <meta charset="utf-8">
    <title>Nibras Code</title>
    <style>
      body { font-family: sans-serif; }
      h1 { color: #1d4ed8; }
    </style>
  </head>
  <body>
    <h1>Nibras Code</h1>
    <p>HTML quruluşu, CSS isə rəngi yazır.</p>
  </body>
</html>

Keçid və şəkil

<a href="https://nibrascode.com">Nibras Code</a>
<img src="logo.png" alt="Nibras Code nişanı">

Sinif ilə üslub

<p class="qeyd">Qısa qeyd.</p>

<style>
  .qeyd {
    background: #f3f4f6;
    padding: 12px;
  }
</style>

Yuxarıdakı qısa nümunələr bir parçanı göstərir. Bunlar isə brauzerdə aça biləcəyin kiçik səhifələrdir. Faylı .html adı ilə saxla. Rəngi və ya sözü dəyiş, yenidən saxla və səhifəni yenilə. HTML nə olduğunu deyir. CSS necə göründüyünü deyir.

Kart

article qutudur. h2 onun içindəki başlıqdır, p isə cümlədir. kart sinfi qarmaqdır. CSS həmin sinifdə olan hər elementə en, açıq fon, nazik xətt və iç boşluq verir. Sinif olmasa, sözlər yenə görünər, amma qutu olmaz.

<article class="kart">
  <h2>Python</h2>
  <p>Oxunaqlı dildir. Kiçik proqram üçün uyğundur.</p>
</article>

<style>
  .kart {
    max-width: 280px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
  }
</style>

Kart 280 pikseldən enli olmur. Geniş ekranda səhifənin bütün eninə yayılmır.

Yan-yana iki keçid

nav keçidləri tutur. CSS olmasa, onlar alt-alta durur və ya altı xətli mavi söz qalır. display: flex onları yan-yana qoyur. gap aralarındakı boşluqdur. text-decoration: none alt xətti götürür. href içindəki ünvan keçidin getdiyi yerdir.

<nav>
  <a href="/programming/python">Python</a>
  <a href="/programming/javascript">JavaScript</a>
</nav>

<style>
  nav { display: flex; gap: 16px; }
  nav a { color: #1d4ed8; text-decoration: none; }
</style>

Sözlər mavi qalır. Alt xətt gedir. flex silinəndə sıra brauzerin adi düzülüşünə qayıdır.

Qısa forma

label sahənin adıdır. input adamın yazdığı boş sətirdir. button basılan yerdir. Formanın özü bir sütundur: əvvəl sahə, sonra düymə, arada kiçik boşluq. Bu nümunə adı heç yerə göndərmir. Göndərmək server və ya JavaScript istəyir. Burada yalnız görünüşü görürsən.

<form>
  <label>
    Ad
    <input name="ad" type="text">
  </label>
  <button type="submit">Göndər</button>
</form>

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
  }
  input, button { padding: 8px; }
</style>

Sahə və düymə eyni endədir, 240 piksel. Yazılan ad bu səhifə ilə tək saxlanmır.

Tünd zolaqlı səhifə

Bu parça deyil, bütöv fayldır. header yuxarıdakı tünd zolaqdır. main onun altındakı ağ yerdir. body { margin: 0 } brauzerin özünün qoyduğu ağ çərçivəni götürür. Rəng və boşluq CSS-dir. Nibras Code və Birinci qeyd sözləri HTML-dir. Faylı note.html adı ilə saxla və aç.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="utf-8">
  <title>Qeyd</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #111827; color: white; padding: 16px; }
    main { padding: 16px; }
  </style>
</head>
<body>
  <header>Nibras Code</header>
  <main>
    <h1>Birinci qeyd</h1>
    <p>Bu sətir əsas hissədə durur.</p>
  </main>
</body>
</html>

Üst zolaq tünddür, üstündəki yazı ağdır. Başlıq zolağın içində yox, altında durur.

HTML nədir?

HTML veb səhifənin quruluşunu yazan işarələmə dilidir. Başlıq, mətn, şəkil və keçid onunla verilir.

CSS nədir?

CSS səhifənin görünüşünü yazan üslub dilidir. Rəng, ölçü, şrift və düzülüş onunla verilir.

HTML proqramlaşdırma dilidirmi?

Xeyr. HTML işarələmə dilidir. Səhifədə nəyin olduğunu bildirir, hesab və şərt yazmır.

CSS olmadan səhifə açılırmı?

Bəli. Brauzer HTML-i onsuz da göstərir. Görünüş isə sadə və səliqəsiz qala bilər.

HTML, CSS və JavaScript eynidirmi?

Xeyr. HTML quruluşu, CSS görünüşü, JavaScript isə səhifənin davranışını yazır.

Öyrənmək üçün ayrıca proqram almaq lazımdırmı?

Xeyr. Başlanğıc üçün mətn redaktoru və brauzer kifayətdir. Faylı .html kimi saxlayıb brauzerdə açmaq olar.

HTML və CSS pulsuzdur?

Bəli. Onları yazmaq və brauzerdə açmaq üçün dilin özünə görə ödəniş yoxdur.